CSS简单了解-CFANZ编程社区

CSS

概念：全称Cascading Style Sheets，层叠样式表。

层叠：多个样式可以作用在同一个html的元素上，同时生效

作用：页面美化和布局控制。

好处：

功能强大
将内容展示和样式控制分离

将内容展示和样式控制分离的目的为：

降低耦合度，便于解耦
让分工协作更容易
提高开发效率

CSS是与HTML结合使用的

使用样式有三种：

（1）内联样式

在标签内使用style属性指定css代码

<div style="color:red">Hello World</div>

（2）内部样式

在head标签内，定义style标签，style标签的标签体内容就是css代码

<!DOCTYPE html>
<html lang="en">
<html>
	<head>
	    <meta charset="UTF-8">
	    <title>title</title>
	    <style>
	        div{
	            color:red;
	        }
	    </style>
	</head>
	<body>
		<div>Hello World</div>
	</body>
</html>

（3）外部样式

定义css资源文件
在head标签内，定义link标签，引入外部的资源文件

引入外部资源文件的标签

<link>：定义文档与外部资源的关系。

`<link>`相应的属性	说明
rel	必需。定义当前文档与被链接文档之间的关系。rel 是 relationship的英文缩写
href	定义被链接文档的位置

rel的值	说明
stylesheet	要导入的样式表的 URL

css资源文件

div{
    color:red;
}

HTML文件

<!DOCTYPE html>
<html lang="en">
<html>
	<head>
	    <meta charset="UTF-8">
	    <title>title</title>
	    <link rel="stylesheet" href="CSS.css">
	</head>
	<body>
		<div>Hello World</div>
	</body>
</html>

第一二三种方式，css作用范围越来越大
第一种方式（内联样式）不常用，后期常用第二，第三种样式

第三种样式中引入资源（link）部分还可以写为：

<style>@import "CSS.css";</style>

CSS语法：

格式：

选择器 { 属性名1: 属性值1; 属性名2:属性值2; ... }

选择器：筛选具有相似特征的元素

注意：每一对属性需要使用;隔开，最后一对属性可以不加;

选择器

作用：筛选具有相似特征的元素。

选择器的分类：

（1）基础选择器

id选择器：选择具体的id属性值的元素（建议在一个html页面中id值唯一）

语法：#id属性值{}

<!DOCTYPE html>
<html lang="en">
<html>
	<head>
	    <meta charset="UTF-8">
	    <title>title</title>
	    <style>
	        #css{
	            color:red;
	        }
	    </style>
	</head>
	<body>
		<div id="css">Hello World</div>
	</body>
</html>

元素选择器：选择具有相同标签名称的元素

语法：标签名称{}

<!DOCTYPE html>
<html lang="en">
<html>
	<head>
	    <meta charset="UTF-8">
	    <title>title</title>
	    <style>
	        div{
	            color:red;
	        }
	    </style>
	</head>
	<body>
		<div>Hello World</div>
	</body>
</html>

类选择器：选择具有相同的class属性值的元素。

语法：.class属性值{}

<!DOCTYPE html>
<html lang="en">
<html>
	<head>
	    <meta charset="UTF-8">
	    <title>title</title>
	    <style>
	        .css{
	            color:red;
	        }
	    </style>
	</head>
	<body>
		<div class="css">Hello World</div>
	</body>
</html>

注意：id选择器优先级高于元素选择器，类选择器选择器优先级高于元素选择器。

（2）扩展选择器：

选择所有元素：

语法： *{}

<style>
      *{
          color:red;
      }
  </style>

2.并集选择器：

语法：选择器1,选择器2{}

<!DOCTYPE html>
<html lang="en">
<html>
    <head>
        <meta charset="UTF-8">
        <title>title</title>
        <style>
            div,span{
                color:red;
            }
        </style>
    </head>
    <body>
     <div>Hello World</div>
    <span>Hello World</span>
    </body>
</html>

后代选择器：选择祖宗元素内的所有符合要求的元素

语法：选择器1 选择器2{}

<!DOCTYPE html>
<html lang="en">
<html>
    <head>
        <meta charset="UTF-8">
        <title>title</title>
        <style>
            div p{
                color:red;
            }
        </style>
    </head>
    <body>
     <div>
         <p>Hello World</p>
         <span>
             <p>Hello World</p>
         </span>
     </div>
    </body>
</html>
<!-- div标签下的p标签中的内容都变红，后代只要有就符合-->

子选择器：筛选父选择器1下的子选择器2

语法：选择器1 > 选择器2{}

<!DOCTYPE html>
<html lang="en">
<html>
    <head>
        <meta charset="UTF-8">
        <title>title</title>
        <style>
            div>p{
                color:red;
            }
        </style>
    </head>
    <body>
     <div>
     <!--此处变红-->
         <p>Hello World</p>
         <span>
         <!--此处不变红-->
             <p>Hello World</p>
         </span>
     </div>
    </body>
</html>

属性选择器：选择元素名称，属性名=属性值的元素

语法：元素名称[属性名="属性值"]{}

<!DOCTYPE html>
<html lang="en">
<html>
    <head>
        <meta charset="UTF-8">
        <title>title</title>
        <style>
            span[id='css']{
                color:red;
            }
        </style>
    </head>
    <body>
   		<span id="css">Hello World</span>
    </body>
</html>

伪类选择器：选择一些元素具有的状态

语法：元素:状态{}

适用于超链接：<a>

我们点击超链接时有四种状态

状态	说明
link	初始化的状态
hover	鼠标悬浮状态
active	正在访问状态
visited	被访问过的状态

<!DOCTYPE html>
<html lang="en">
<html>
    <head>
        <meta charset="UTF-8">
        <title>title</title>
        <style>
            a:link{
                color:red;
            }
            a:hover{
                color:green;
            }
            a:active{
                color:yellow;
            }
            a:visited{
                color:grey;
            }
        </style>
    </head>
    <body>
    	<a href="#">你好</a>
    </body>
</html>

属性

字体、文本	说明
font-size	字体大小
color	文本颜色
text-align	对其方式
line-height	行高

<!DOCTYPE html>
<html lang="en">
<html>
    <head>
        <meta charset="UTF-8">
        <title>title</title>
        <style>
            div{
                font-size: 30px;
                color:red;
                text-align: center;
                line-height: 100px;
            }
        </style>
    </head>
    <body>
    <div>你好</div>
    </body>
</html>

背景	说明
background	背景

<style>
    div{
        background: red;
    }
</style>

边框	说明
border	设置边框，复合属性

边框尺寸	说明
width	宽度
height	高度

<style>
    div{
        border:5px solid red;
        width: 500px;
     	height: 500px;
    }
</style>
		 <!--solid是实线的意思 -->

盒子模型：控制布局	说明
margin	外边距
padding	内边距，默认情况下内边距会影响整个盒子的大小
box-sizing	允许您为了适应区域以某种方式定义某些元素
float	浮动

设置box-sizing: border-box; 让width和height就是最终盒子的大小

float的值	说明
left	向左浮动
right	向右浮动