目录
CSS介绍
CSS指层叠样式表（CascadingStyleSheets）
样式定义如何显示HTML元素
样式通常存储在样式表中
CSS使用方式
内联方式
样式定义在单个的HTML的属性style里
<h1 style="color:blue;"></h1>
内部样式表
样式定义在HTML页的头元素中
<style type="text/css">
h2{
color:red
}
</style>
外部样式表
将样式定义在一个外部的CSS文件中（.css文件）
由HTML页面引用样式表文件
CSS特性
继承性
父元素的CSS的声明可以被子元素继承，如字体、颜色等。
层叠性
同一个元素若存在多个CSS规则，对于不冲突的声明可以叠加。
优先级
同一个元素若存在多个CSS规则，对于冲突的声明以优先级高者为准
优先级
（低->高）
浏览器缺省设置
外部样式表或者内部样式表
就近优先
内联样式
相同的样式，如果重复定义，以最后一次的定义为准
选择器
| 选择器 | 示例 | 说明 |
|---|---|---|
| 元素选择器 | p | 选择所有p标签 |
| id选择器 | #my | 选择id值为my的元素 |
| 类选择器 | .my | 选择class值为my的元素 |
| 选择器组 | h1,p | 算着所有h1和p元素 |
| 派生选择器 | div p | 选择div中的所有p元素 |
| 子选择器 | div>p | 选择父级是div的p元素 |
| 属性选择器 | input[type=text] | 选择input元素属性type="text"的元素 |
| 首个子元素选择器 | p:first-child | 匹配 <p> 的父元素的第一个<p>元素 |
| 指定元素选择器 | div p:nth-of-type(2) | div中第二个p元素 |
元素选择器
<style>
/*在{}中写属性和值,写法和内联方式一致*/
h1{
color: red;
}
/* 同时选择h2和h3元素 多个元素使用逗号隔开 */
h2,h3{
color: green;
}
</style>
id选择器
<style>
/* id选择器 #id值选取元素 */
#p1{
color: pink;
}
</style>
<p id="p1">我是文本2</p>
类选择器
<style>
/* 类选择器:.class值表示选择一组元素 */
.p1{
color: pink;
}
</style>
<p class="p1">我是文本2</p>
派生选择器
<style>
div p{
color:red;
}
</style>
<div>
<p>我是p1</p>
</div>
子选择器
<style>
#container>strong{
color: red;
}
#container u strong{
color: blue;
}
</style>
</head>
<body>
<div id="container">
<strong>常州</strong>
<u>武进<strong>区</strong></u>
</div>
</body>
</html>
属性选择器
<style>
/* 属性选择器 选择输入框type=text的元素*/
input[type=text]{
color:red;
}
p[a=one]{
color:red;
}
</style>
<input type="text" >
<p a=one>千山鸟飞绝</p>
首个子元素
<style>/* 选择div中第一个p元素 */
div p:first-child{
color: red;
}
</style>
指定元素选择器
<style>/* 选择div中第三个p元素*/
div p:nth-of-type(3){
color: blue;
}
</style>
伪类选择器
| 选择器名称 | 说明 |
|---|---|
| :link | 向未被访问的超链接添加样式 |
| :visited | 向已被访问的超链接添加样式 |
| :hover | 当鼠标悬停至元素上方时，向该元素添加样式 |
| :focus | 当元素获取焦点时，向该元素添加样式 |
文本
| 属性名 | 说明 |
|---|---|
| color | 字体颜色 |
| text-align | 字体对齐方式 center 水平居中 right靠右对齐 |
| line-height | 控制行与行的距离 一般可以让行高等于当前元素的高度,让文字垂直居中 |
| letter-spacing | 字体的间距 单位像素px |
| text-indent | 首行缩进 单位像素px |
字体
| 属性名 | 说明 |
|---|---|
| font-size | 字体大小 单位一般使用px rem 1rem=16px |
| font-family | 字体的系列 |
| font-weight | 字体的粗细 通过100的整数来控制 值越大字体越粗 |
列表
| 属性名 | 说明 |
|---|---|
| list-style-type | 每一项的图标显示 |
| list-style-image | 可以引用图标代替默认图标显示 url('') |
<style>
ol{
list-style-type: circle;
list-style-type: disc;
list-style-type: lower-roman;
list-style-type: upper-roman;
list-style-type: none;
list-style-image: url('../../img/a.png');
}
</style>
表格
<style>
table{
border-collapse: collapse;
width: 500px;
text-align: center;
background-color: cadetblue;
}
th{
color:red;
}
tr{
height: 40px;
color:#fff;
}
</style>
<body>
<table border="1" align="center">
<thead>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</thead>
<tbody>
<tr>
<td>1002</td>
<td>tom2</td>
<td>女</td>
<td>20</td>
</tr>
</tbody>
<tfoot>
<th colspan="3">平均年龄</th>
<th>20</th>
</tfoot>
</table>
</body>
背景
background-image属性用于设置背景图片
默认值是name，表示背景上没有放置任何图像
如果需要设置一个背景图像，需要用起始字母url附带一个图像的URL
可以是相对URL或者绝对URL
默认情况下，背景图片在水平和垂直方向上重复出现，创建一种称为“墙纸”的效果
background-repeat属于可以控制背景图片的平铺效果
background-repeat可取值为
repeat：在垂直方向和水平方向重复，为重复值
repeat-x：仅在水平方向重复
repeat-y：仅在垂直方向重复
no-repeat：仅显示一次
background-position属性用于改变背景图片元素种的位置，该属性的取值为
| 值 | 说明 |
|---|---|
| x%y% | 第一个值是水平位置，第二个值是垂直位置，表示沿着x（水平）和y轴（垂直）的百分比，左上角是0%0%，右下角是100%100% |
| xy | 第一个值是水平位置，第二个值是垂直位置，表示沿着x轴（水平）和y轴（垂直）的绝对长度，左上角是0 0 |
| left | 在页面或者包含元素的左边显示 |
| center | 在页面或者包含元素的中间显示 |
| right | 在页面或者包含元素的右边显示 |
| top | 在页面或者包含元素的顶部显示 |
| bottom | 在页面或者包含元素的底部显示 |
鼠标
#div3:hover{
cursor: pointer;
cursor: crosshair;
cursor: wait;
cursor: help;
cursor: text;
cursor: default;
}
<div id="div3">我是div</div>
border
border属性：用来设置元素的边框,任何元素都有边框
四边设置
border:width值style值color值；
单边设置
border-left:width值style值color值；
border-right:width值style值color值；
border-top:width值style值color值；
border-bottom:width值style值color值
宽高
块元素和行内块元素有宽高属性 行内元素没有宽高属性
box-sizing: border-box;//加上边框的总宽度等于元素宽度
box模型
框模型（BoxModel）定义了元素框处理元素内容、内边距、边框和外边距的方式。
padding:元素内容距离边框的距离,增加padding会使元素体积变大,实际显示内容不变
marging:边框距离别的元素的距离
元素水平居中
margin:0 auto;
轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
| 属性 | 说明 | 值 |
|---|---|---|
| outline | 设置轮廓属性 | none,width,style,color 用法和border一致 |
display
元素都有自己默认的显示方式，包括
块元素
从上至下，可以设置宽高，如<h1>、<p>、<div>等
行内元素
从左至右，不能设置宽高，如<span>、<a>等
行内块
从左至右，可以设置宽高，如<input>、<img>等
除了默认的显示效果之外，可以使用display属性来修改元素框的显示方式，即改变生成的框的类型
改变显示规则
用于改变元素的显示方式，其取值有：none、block、inline、inline-bloack
none：不显示该元素，释放其占用位置
block：将元素显示方式设置为块，如何以将行内元素<a>转换为块元素inline：将元素显示方式设置为行内，如可以将块元素<p>转换为行内元素
inline-bloack：将元素显示方式设置为行内快，如可以将行内元素<Span>转换为行内块元素
overflow
| 值 | 说明 |
|---|---|
| visible | 默认值 溢出时会显示在元素框之外。 |
| hidden | 超出部分会隐藏 |
| scroll | 出现滚动条 |
| auto | 溢出时才出现滚动条 |
Q&A
题1 CSS使用方式有哪些及优先级
CSS使用方式有内联、内部、外部，外部样式表或内部样式表根据就近优先原则决定优先级，内联样式优先级最高
题2 CSS常用选择器有哪些及含义
| 选择器 | 示例 | 说明 |
|---|---|---|
| 元素选择器 | p | 选择所有p标签 |
| id选择器 | #my | 选择id值为my的元素 |
| 类选择器 | .my | 选择class值为my的元素 |
| 选择器组 | h1,p | 算着所有h1和p元素 |
| 派生选择器 | div p | 选择div中的所有p元素 |
| 子选择器 | div>p | 选择父级是div的p元素 |
| 属性选择器 | input[type=text] | 选择input元素属性type="text"的元素 |
| 首个子元素选择器 | p:first-child | 匹配 <p> 的父元素的第一个<p>元素 |
| 指定元素选择器 | div p:nth-of-type(2) | div中第二个p元素 |
题3 元素box模型中,有哪些部分组成及含义
组成包括element（元素）、padding（内边距）、margin（外边框）、border（边框）
题4 元素有哪些显示方式及切换显示
显示方式包括：块、行内、行内块
切换显示通过更改display的属性值：none（不显示该元素）、block（将元素显示方式设置为块）、inline（元素显示方式设置为行内）、nline-bloack（将元素显示方式设置为行内块）