CSS
层叠样式表
- 在html中应用
css嵌入到html的头部的style标签内
css嵌入到元素style属性内
css规则与html结构分离(解耦)
css规则可以复用
css单独写入到.css文件,通过link引入到html - 语法
注释: /* 注释内容 */
语法:
选择器 {
样式规则
}
.box {
background-color:lightcoral;
color: #fff;
width: 300px;
margin-bottom: 1em;
} - 选择器
- 核心选择器
id选择器 利用了html元素的id属性,唯一
#one {} 选中id为one的元素
class选择器 利用html元素的class属性,非唯一
.box {} 选中class为box的元素
标签选择器 利用标签名进行选择
div {} 选中所有的div元素
并且选择器
div.box {} 选中div元素,并且这个div的class为box
和选择器
div,.box{} 选中div元素和class为box的元素
普遍选择器- {} 选中所有元素
- 层次选择器( 两个选择器配合使用)
子选择器 通过父元素选择子元素 .menu > li {}
后代选择器
空格
.menu li {}
-
兄弟选择器
-
当前元素之后的所有兄弟
ul.rank > li:nth-child(2) ~ *{}
第二个li之后的所有li
+当前元素之后的下一个兄弟
ul.rank > li:nth-child(2) ~ *{}
第三个li
- 属性选择器(属性过滤器),一般应用在表单元素
input[name]
具有name属性input元素
input[name=‘username’]
具有name属性,并且name属性值为username的input元素
input[name^=‘u’]
具有name属性,并且name属性值以’u’作为开始
input[name*=‘u’]
具有name属性,并且name属性值包含’u’
input[name$=‘u’]
具有name属性,并且name属性值以’u’作为结尾 - 伪类选择器(伪类过滤器)
:first-child
:last-child
:nth-child(n) 第n个孩子阶段
:visited 访问过的
:hover 光标悬浮上去
:active a标签
:focus 聚焦
5. 伪元素选择器
::after
ul.menu::after {
}
在class为menu的ul元素中追加一个子元素
<ul class="menu">
<li>one</li>
<li>two</li>
::after
</ul>
ul.menu::before {
}
在class为menu的ul元素中插入一个子元素
<ul class="menu"> ::before <li>one</li> <li>two</li> </ul>
4) 计算选择器优先级
当多个选择器中的相同规则作用于同一个元素的时候,我们纠结到底这个元素上使用哪个规则的时候。
公务员 -> 考研211+ -> 进入BAT(30%) -> 进入中小型私企(0)
-
权重(积分)
1000 style
100 id
10 class、伪类
1 元素选择器、伪元素1+10 + 1 + 10 + 1+ 10 + 1
ul.menu > li.menu_item > ul.sub_menu > li {
color: lightcyan; /* 34*/
}
#introduce {
color:lightcoral /100/
}
.si {
color: gray !important;
} -
顺序(排名)
当权重值相同的情况下,后者覆盖前者 -
特权(!important)
脱离了权重和顺序规则
- 样式规则
-
字体规则
可被继承
font-family 字体
字体栈 “Microsoft YaHei”,“宋体”
在浏览器所在pc从字体栈顶到底寻找字体,找不到使用默认字体
font-size 字体大小
12px
font-weight 字体粗细程度
100~900
bold
bolder
font-style 是否是斜体
italic
normal
color 字体颜色
line-height 行高
长度的相对单位
1px
em 相对于当前元素上的字号
rem 相对于根元素上的字号
font 速写形式
font: font-style font-weight font-size/line-height font-family
font: normal normal 14px/1.2 ‘宋体’,‘微软雅黑’;
font: 14px/1.2 ‘宋体’,‘微软雅黑’;网络字体(iconfont)
应用
分析实现过程
@font-face {
font-family:“iconfont”
src:
}.iconfont { font-family:"iconfont" } .icon-Backward-Button:before { content: "\e82e"; }
-
文本规则
text-align 文本在容器中显示方式
center
text-decoration-line:underline;
text-decoration-style: double;
text-decoration-color: lightsalmon;
text-decoration: none;
text-indent 缩进
text-transform 控制大小写
white-space:容器内的文本是否会主动换行
nowrap 不换行
overflow: 容器内的内容超出部分如何处理?
hidden
text-overflow: 文本超出部分如何显示提示?
ellipsis ‘…’ -
列表规则
用于设置有序列表、无需列表、自定义列表的显示方式 ul、ol、dl
list-style:none; -
其他规则
cursor:pointer;
visibility:hidden
opacity:0.2
display:none; 【三十年河东三十年河西】
改变元素的显示方式
none
block 将行内元素转换为块元素
inline 将块元素转换为行内元素
inline-block 行内块元素
与其他行内元素共享一行空间
可以指定宽高
面试题:
如何将一个文本在块元素进行水平居中?
text-align:center
如何将一个文本在块元素进行垂直居中?
如何将一个块元素进行水平居中?【3种】
overflow:
overflow-x,overflow-y速写
overflow:hidden;
overflow:scroll;
overflow:auto;
容器,容器的内容的大小超过容器本身
outline
外圈线框
outline-color: pink;
outline-width: 2px;
outline-style: solid;
outline-offset: 1px;
outline:
- 盒子规则
盒子 - 块元素
margin 外边距(盒子外边框距离其他元素的距离)
margin: 10px; 上右下左
margin: 10px 20px; 上下,左右
margin: 10px 20px 30px; 上 左右 下
margin: 10px 20px 30px 40px; 下 右 下 左
速写形式,外边距,上下外边距会进行重叠
margin-top
margin-right
margin-bottom
margin-left
border 边框
border-width
border-top-width
border-right-width
border-bottom-width
border-left-width
border-style
border-top-style
border-right-style
border-bottom-style
border-left-style
border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
border 速写
border: 2px solid #ccc;
padding 内边距(内容距离盒子内边框的距离)
padding: 10px; 上右下左
padding: 10px 20px; 上下,左右
padding: 10px 20px 30px; 上 左右 下
padding: 10px 20px 30px 40px; 下 右 下 左
速写形式,外边距,上下外边距会进行重叠
padding-top
padding-right
padding-bottom
padding-left
width/height
宽高
box-sizing(盒子模式)
内容盒子(普通盒子 , 默认盒子)
content-box;
盒子实际占据的宽度 2borderWidth + 2padding + width
盒子实际占据的高度 2borderWidth + 2padding + height
边框盒子(怪异盒子 ie低版本)
border-box;
盒子实际占据的宽度 :width
width = 2borderWidth + 2padding + 内容宽
盒子实际占据的高度 :height
border-radius:2px
外圆 300px
内圆 200px
期望 内圆由200 变化到250,并且,中心点不变
background
background-color
background-image
background-repeat
background-size
background-position
background-clip
background-orign
background-attachment
background 速写形式