107 lines
2.6 KiB
Plaintext
107 lines
2.6 KiB
Plaintext
css 层叠样式表
|
||
|
||
美化html（网站）的
|
||
|
||
|
||
写法，三种写法：
|
||
|
||
内联写法 优先级最高
|
||
<p style="color: red;">你好</p>
|
||
|
||
内部写法
|
||
|
||
外链写法
|
||
|
||
改变优先级：!important
|
||
|
||
css选择器 {
|
||
css属性名: css值;
|
||
}
|
||
|
||
|
||
css选择器:
|
||
|
||
标签选择器
|
||
|
||
class（.） 选择器
|
||
|
||
id（#） 选择器 基本不用
|
||
|
||
，表示多选
|
||
空格 表格嵌套（父子）关系
|
||
> 选择父元素内部最近的子元素
|
||
+ 选择同级
|
||
|
||
通配符选择器 （*） 选中网页上所有标签（body）
|
||
|
||
用途：清除浏览器标签自带的样式
|
||
|
||
伪类选择器：
|
||
|
||
:hover
|
||
|
||
|
||
|
||
盒子模型：内边距（padding） 外边距（margin） 内容（content） 边框（border）
|
||
|
||
什么叫盒子模型？
|
||
|
||
宽度计算规则：
|
||
|
||
标准盒子模型：
|
||
|
||
元素的真实宽高 = 你的写的宽度 + 左右内边距和左右边框 x 你的写的高度 + 上下内边距和上下边框
|
||
|
||
怪异盒子模型（IE）
|
||
box-sizing: border-box;
|
||
|
||
|
||
/* margin: 20px; 四个方向的距离 上 右 下 左 */
|
||
/* margin: 20px 30px; 上下 左右 */
|
||
/* margin: 10px 20px 30px; 上 左右 下 */
|
||
/* margin: 5px 10px 15px 20px; 上 右 下 左 */
|
||
|
||
/* margin-top: 30px;
|
||
margin-right: 30px;
|
||
margin-bottom: 30px;
|
||
margin-left: 30px; */
|
||
|
||
padding-left: 30px;
|
||
padding-top: 20px;
|
||
|
||
/* border: 13px solid #161616; */
|
||
|
||
/* border-left: 13px solid blue;
|
||
border-right: 13px solid #161616;
|
||
border-top: 13px solid green;
|
||
border-bottom: 13px solid yellow; */
|
||
|
||
/* border-left-width: 13px;
|
||
border-left-style: solid;
|
||
border-left-color: aquamarine; */
|
||
|
||
|
||
|
||
css 属性记录：
|
||
|
||
text-decoration 设置文字的线条，一般用在a上
|
||
|
||
line-height 设置行高，一般用于 块标签内部单行文字的垂直居中
|
||
text-align 设置x轴对齐方式 ，一般用于 块标签内部文字的对齐方式
|
||
margin: 0 auto: 一个块标签在另外一个块标签中居中
|
||
|
||
vertical-align 设置y轴对齐方式，一般设置在高度较高的元素上
|
||
cursor 设置光标的外观
|
||
outline: none; 输入框（input button textarea）
|
||
display 主要作用是：实现块标签和行标签的转换，次要作用：实现元素显示(block)隐藏(none)
|
||
|
||
inline 行
|
||
|
||
block 块
|
||
|
||
inline-block 行内块标签
|
||
|
||
none 把元素隐藏起来
|
||
|
||
元素被设置 inline-block 后，标签之间会有一个默认的边距，这个边距需要在父元素上设置font-size 0
|
||
来消除 |