cascading style sheet 层叠样式表
用途：
1.主要控制HTML文档的版面样式
2.美化web页面的外观
css语法
选择器{ 声明语句1; 声明语句2; }
属性名称: 属性值
注释： /* css注释内容 */
css样式的引入方式
外部样式——实现了结构和表现的彻底分离
位置：在外部新建css文件，在HTML文档的head标签中通过link标签将css文件引入
语法： <link rel="stylesheet" href="css文件的路径">
rel属性 当前文档与被链接文档之间的关系
stylesheet得到所有浏览器的支持，表示外部文件的类型是css文件
创建步骤：
1.创建一个css文件夹，新建后缀名为.css的文件
2.在后缀名为.css文件中,输入编码方式：@charset "utf-8";
3.在HTML文档中，head标签内部，通过link标签引入css文件
<head>
...............
<link rel="stylesheet" href="css/*.css">
...............
</head>
选择器
标签选择器——权值1
结构中：<div>box1</div>
样式中：div{ 声明语句 }
class选择器——权值10
结构中：<div class="box">box2</div>
<p class="box txt2">content2</p>
样式中：.box{ 声明语句 }
.txt2{ 声明语句 }
注意：使用标签选择器和class选择器为同一个元素设置样式，class选择器的优先级高
选择器的优先级与权值相关，权值越大优先级越高；权值相同，后写的会覆盖先写内容
选择器的命名规范：
1.名称尽量有含义
2. 建议始终用英文字母开头，可以包含英文字母、数字、-、_
3. 除了-和_之外的特殊符号不允许使用
4.不能使用中文汉字、纯数字，不能以数字开头
5.名称区分大小写
后代选择器——权值是所有选择器权值的累加
选择器1 选择器2{ 声明语句 }
选择器1范围内的所有的选择器2都有样式
群组选择器
选择器1, 选择器2{ 声明语句 }
选择器1和选择器2都具有相同的样式
1.小红明天穿白衬衫
2.小蓝明天穿白衬衫
3.小明明天穿白衬衫
小红, 小蓝, 小明{ 明天穿白衬衫 }
伪类选择器
选择器:hover{ 鼠标悬停的显示效果 }
/* 鼠标悬停到.box盒子上，让盒子的背景颜色设置为蓝色blue */
box2:hover{background-color: blue; }
/* 鼠标悬停到.wrap盒子上，让.wrap中的子盒div背景颜色变为lightblue */
.wrap2:hover div{background-color: lightblue; }
网友评论