94 lines
2.0 KiB
Plaintext
94 lines
2.0 KiB
Plaintext
css 写法
|
||
三种：
|
||
|
||
内部写法（写在开始标签内部的）
|
||
<p style="color: blue;">这是测试文字</p>
|
||
优先级最高
|
||
|
||
!important 提示css属性的优先级
|
||
|
||
内联写法（写在head里面的）
|
||
|
||
外链写法（单独一个css文件）
|
||
|
||
|
||
基本写法：
|
||
|
||
选择器 {
|
||
属性名: 属性值 （可选 !important）
|
||
}
|
||
|
||
组合写法：
|
||
选择1 选择器2: 选择 标签1 中 的 标签2 简写：嵌套关系
|
||
选择1 > 选择器2: 选择 父标签为1 中 的 2标签 简写：嵌套关系
|
||
|
||
选择1,选择器2: 同时选中 标签1和2
|
||
|
||
选择1+选择器2: 选中 紧跟在 标签1 后面 的标签2
|
||
|
||
|
||
|
||
选择器: 找人的一种方式
|
||
|
||
标签选择器
|
||
|
||
|
||
给标签取个名字
|
||
类选择器 class （简写 . ）
|
||
id选择器 简写 #
|
||
这个名字是这个网页唯一的
|
||
|
||
|
||
* 通配符选择器
|
||
一般用来清除 标签 的 默认样式
|
||
|
||
|
||
伪类选择器
|
||
:hover
|
||
:focus
|
||
|
||
:before
|
||
:after
|
||
|
||
|
||
|
||
路径写法：
|
||
|
||
绝对路径
|
||
|
||
相对距离
|
||
|
||
./ 当前路径开始寻找
|
||
../ 从当前位置返回上一级开始寻找
|
||
/ 从当前路径的开始位置开始寻找
|
||
|
||
|
||
|
||
|
||
|
||
css属性学习：
|
||
|
||
display: 可以隐藏显示元素，将块 和 行 进行 相互转换
|
||
inline-block 同时具有 行标签 放在一行的特性，还具有块标签可以设置宽高的特殊
|
||
inline 行标签
|
||
block 块标签
|
||
none 隐藏元素
|
||
|
||
text-decoration: none; 清除下划线
|
||
text-shadow：13px 6px 2px #f00 文字加阴影
|
||
font-size: 30px; 设置字体大小
|
||
font-weight: bold; 加错
|
||
color: red; 设置颜色
|
||
background: red; 设置背景色
|
||
text-align: center; 文字在父元素的宽度内部居中
|
||
opacity: 0 ~ 1; 设置透明度
|
||
|
||
line-height 垂直居中 数值和父元素的高度一样
|
||
注意：只针对单行文字
|
||
父元素内部子元素的居中方式
|
||
|
||
vertical-align 垂直居中
|
||
letter-spacing: 3px; 字符之间的间距（x轴）
|
||
|
||
|
||
|