CSS（Cascading StyleSheets的缩写），翻译为“层叠样式表”或者“级联样式表”，简称样式表
Cascading StyleSheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁
用来给HTML网页来设置外观或者样式：HTML网页中的文字的大小、颜色、字体，网页的背景颜色、背景图片
CSS的3种书写方式:
1.行内式(内联式):
将CSS代码书写在HTML标签的style__属性中;style是一个通用属性，每一个标签里面都拥有这个属性！
<div style="width:100px; height:100px;background:red ">......</div>
2.嵌入式:
-
- 将CSS代码嵌入到HTML文件中，嵌入式是通过HTML中的_style标签_将CSS代码嵌入到HTML网页中！
- `<style type="text/css">
div{ width:100px; height:100px; background:red }
......
</style>`
3.外链式:
外链式是指单独写一个以.css为扩展名的文件，然后在head标签中使用link标签，将这个css文件链接到html文件中
注意：css文件不能单独的运行，它必须要依赖于HTML文件！
| 书写方式 | 写法 | 特点 |
| 行内式 | <p style=“color:red”>一段文字</p> | 样式过多,会造成代码重复度高 |
| 嵌入式 | <head> <style> p{color:red} </style> </head> | 多网页,同样的代码设置重复 |
| 外链式 | <head> <linkhref=“./css/test.css” > </head> | HTML和CSS结构分离,便于查找和管理 |
属性介绍
width设置元素(标签)的宽度，如：width:100px;
height设置元素(标签)的高度，如：height:200px;
background设置元素背景色或者背景图片，如：background:gold; 设置元素背景色为金色
border设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
边框属性可以分四个方向
border-top:1pxsolid red 实线
border-left:1pxdash green 虚线
border-right:1pxpoint yellow 圆点
border-bottom:1pxdouble blue 双边框
padding:内边距-设置元素包含的内容和元素边框的距离
padding-top
padding-right
padding-left
padding-bottom
连写: padding: 上 右 下 左 按照顺时针的方向
padding:10px四周都是10px
padding:10px20px 上下是10px,左右是20px
padding:10px20px 30px 上10px 左右20px 下30px
margin:外边距,设置元素与外界的距离
属性:margin-top
属性联写:margin:topright ;与padding属性联写设置方向一样
margin：50px auto 0px 注：上50px 左右自动
float:设置元素浮动,浮动可以让块元素排列在一行，浮动分为左浮动：float:left; 右浮动：float:right;
文本常用样式属性:
color设置文字的颜色，如： color:red;
font-size设置文字的大小，如：font-size:12px;
font-family设置文字的字体，如：font-family:'微软雅黑';为了避免中文字不兼容，一般写成：font-family:'Microsoft Yahei';
font-weight设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
font-family:字体1.汉字:黑体 宋体 2.英文:SimHei SimSun 3.Unicode编码
样式中的注释
com+/contrl+shift+/
/* 设置头部的样式*/
.header{
width:960px;
height:80px;
background:gold;
}
常用选择器
选择器是指通过一定的语法规则选取到对应的HTML标记，然后给这个对应的HTML标记设置样式
1.标签选择器
写法:标签名{属性:值;属性:值}
标签选择器影响范围大，一般用来做一些通用设置，或用在层级选择器中。
举例：
div{color:red}
......
<div>这是第一个div</div> <!--对应以上样式 -->
<div>这是第二个div</div> <!--对应以上样式 -->
2.类选择器
写法:类名{属性:值;属性:值}
通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
举例:
.blue{color:blue}
.big{font-size:20px}
.box{width:100px;height:100px;background:gold}
......
<div class="blue">....</div>
<h3 class="blue big box">....</h3>
<p class="blue box">....</p>
3.层级选择器(后代选择器)
写法：父选择器空格子选择器{属性：值}
主要应用在标签嵌套的结构中，层级选择器，是结合上面的两种选择器来写的选择器,它可与标签选择器结合使用，减少命名，同时也可以通过层级，限制样式的作用范围。
举例:
.con{width:300px;height:80px;background:green}
.con span{color:red}
.con .pink{color:pink}
.con .gold{color:gold}
......
<div class="con">
<span>....</span>
<a href="#"class="pink">....</a>
<a href="#"class="gold">...</a>
</div>
<span>....</span>
<a href="#" class="pink">....</a>
| 选择器 | 书写格式 |
| 标签选择器 | 标签名{属性:值} P{color:red} |
| 类选择器 | .类名{属性,值} .title{color:red} |
| 层级选择器 | .类名.子类名{属性:值} .title.subtitle{属性:值} |
通用选择器:
- *{属性:值}
*{
color:red;
}
子选择器
- E>F{属性:值};子元素选择器,匹配所有属于E元素的子元素F,
1.子元素选择器: 只是子元素
/*.box>p{
color: red;
}*/
相邻元素选择器
- E+F{属性:值}; 相邻元素选择器,匹配所有紧随E元素之后的元素(下面)
/*相邻元素选择器
1.相邻下面的元素,不是上面
2.中间不能隔元素设置
*/
.box div+p{
color: red;
}
属性选择器
- 属性选择器:标签[属性class] 针对所有是class属性的元素
- 标签[title=“123”],匹配所有title属性值是123的元素
- 标签[title^=“1”],匹配所有title属性值是以1开头元素
- 标签[title$=“1”],匹配所有title属性值是以1结尾元素
- 标签[title*=“1”],匹配所有title属性值是有1的元素
/*1.只要有class属性*/
/*div[class]{
color:red;
}*/
/*2.class="12"*/
/*div[class="12abs"]{
color:red;
}*/
/*3.以class^="12",以12开头的值*/
/*div[class^="12"]{
color:red;
}*/
/*4.以class$="12",以12结尾的值*/
/*div[class$="12"]{
color:red;
}*/
/*5.以class*="a",凡是有a的值*/
div[class*="a"]{
color:red;
}
其他选择器1
- 1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素
- 2、E:first-child：匹配元素类型为E且是父元素的第一个子元素
- 3、E:last-child：匹配元素类型为E且是父元素的最后一个子元素
/*1.第几个子元素; 标签类型和序号必须全部一致*/
/*.box div:nth-child(1){
color:red;
}*/
/*倒着数
.box div:nth-last-child(2){
color:red;
}*/
/*最后一个*/
/*.box div:last-child{
color:red;
}*/
/*第一个 标签类型和序号必须全部一致*/
.box div:first-child{
color:red;
}
其他选择器2
- 1.E:nth-of-type(n) 第几个E类型元素
- 2.E:first-of-type 第一个
- 3. E:last-of-type 最后一个
-
/*子元素中 第一个div标签*/
.box div:nth-of-type(3){
color: gold;
}
.box div:first-of-type{
color: red;
}
.box div:last-of-type{
color: green;
}
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
