一、html嵌套css样式
1、外部
优先推荐
2、内部
3、内联
不推荐
二、样式表写法
img{
background:#ccc;
border-radius:256px;
}
三、css优先级
1、内联style
2、id选择器
3、class选择器
4、标签
四、css长度单位
1、px:像素
2、em:倍数
em常用于文字,因为文字的最小单位是14px,1em意思是14*1,2em意思是14*2
五、css颜色单位
1、red
2、#FF0000
3、#F00
4、rgb(255, 255, 255)
六、css选择器
1、常用选择器
2、基本选择器
3、层级选择器
4、伪类选择器
5、属性选择器
七、常用选择器
1、标签
span{...}
2、id
#imgid{...}
3、类
.imgcls{...}
4、关联选择器
.div2 .imgcls{...}
class为div2标签里面的class名称是imgcls的标签,用空格表示谁里面的谁
5、组合选择器
样式共用
.div1 .imgcls,.div2 .imgcls{...}
div1和div2里面的imgcls共用一个样式,用逗号分隔
八、基本选择器
1、:first-child
img:first-child{...}
img标签的第一个元素
2、:first-letter
p:first-letter{font-size:50px;}
p标签第一个字符改成50px
3、:first-line
p:first-line{font-size:50px;}
p标签第一个行改成50px
4、:last-child
img:last-child{...}
img标签的最后一个元素
5、nth-child(2)
img:nth-child(2){...}
img标签的第几个元素
九、层级选择器
1、a b
.div1 h1{...}
找到div1中的后代h1标签(包括子节点、孙子节点等)
2、a>b
.div1>h1{...}
找到div1中子元素的h1标签(只有子节点)
3、a+b
.div1+h1{...}
找到div1标签后面的一个h1标签(同一层级的)
十、伪类选择器
带有一定js特效的。
1、:hover
img:hover{...}
当鼠标移到img标签上方的时候
2、:focus
.username:focus{...}
当username文本框获得鼠标焦点的时候,就是有光标在闪的时候
3、::selection
被选择的时候
p::selection{...}
p标签里面文字被选中的时候,把文字背景变成红色
十一、属性选择器
用的很少。
1、[id]
2、[id=user1]
input[name=username]{...}
找到input标签下name等于username的那个input标签
3、[name*=us]
name包含us字符的
4、[name^=en]
name以en开头的
5、[name$=en]
name以en结束的
十二、常见的样式属性和值
1、字体和颜色
2、背景属性
3、文本属性
4、边框属性
5、鼠标光标属性
6、列表样式
7、定位属性
8、内外边距
9、浮动和清除浮动
10、滚动条
11、显示和隐藏
十三、字体
font-family | 字体类型 | 字体名称:宋体,楷体,黑体 |
font-size | 字体大小 | 30px |
font-style | 字体样式 | normal、italic |
font-weight | 字体粗细 | bold |
十四、文本
letter-spacing | 字间距 | |
word-spacing | 词间距 | |
text-decoration | 下划线 | none || underline || overline || line-through none用来把a标签的下划线去掉 |
text-align | 对齐 | left、center、right 只能文本居中,块标签居中,margin:0 auto; |
text-indent | 缩进 | p标签段落的首行缩进 |
line-height | 行高 | |
color | 颜色 | |
word-break | 折行 | 自动换行,组合使用: |
十五、背景
background-color | 背景颜色 | |
background-image | 背景图片 | 背景图片层级,在文字和背景颜色之间 |
background-repeat | 图片重复 | no-repeat不重复 |
background-attachment | 图片滚动 | scroll、fixed |
background-position | 图片位置 | 水平:left、center、right 垂直:top、center、bottom 50px 50px -50px -50px 50% 50% |
background可以缩写:
background:#ccc url('xs.png') no-repeat fixed 50% 50%;
十六、边框
border-style | 边框样式 | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset |
border-width | 边框宽度 | 30px |
border-color | 边框颜色 | #F00 |
border可以缩写:
border:2px solid #F00;
边框可以分为上下左右:
border-bottom:2px solid #F00;
border-left:2px solid #F00;
border-right:2px solid #00F;
border-top:2px outset #00F;
十七、鼠标
cursor属性 | |
crosshair | 十字形状 |
pointer | 小手形状 |
text | 文本形状 |
wait | 等待形状 |
default | 默认形状 |
help | 帮助形状 |
十八、列表(ul标签)
list-style-type属性 | |
disc | 小圆点,实心圆 |
circle | 空心圆 |
square | 实心方块 |
decimal | 数字 |
lower-roman | 小写罗马数字 |
upper-roman | 大写罗马数字 |
lower-alpha | 小写字母 |
upper-alpha | 大写字母 |
none | 把列表前的选项图标取消 |
十九、文本框
textarea属性 | |
resize | none,文本框不能拖动 |
width | 500px |
height | 300px |
二十、样式继承
文字有关的样式会继承下去。父亲的样式会继承给孩子,font开头的样式。
p{
font-family: 微软雅黑;
}
<p><span>linux</span></p>
p样式里字体涵盖了p标签和span标签。
F12里span会看到Inherited from p,就是从p标签继承过来的。
二十一、表格
border-collapse | 表格边框是否合并 | collapse |
border-spacing | 表格边框之间的距离 |
二十二、定位
页面上所有元素默认都是从上而下,从左往右来布局。
position属性 | |
absolute | 绝对定位,脱离文档流,原来的位置会释放。没有给定坐标的时候,它的坐标是原来自己的位置 |
relative | 相对定位,脱离文档流,原来的位置不会释放。相对它原来位置的偏移 |
-------------- | ------------------------------------------------------------------------------------- |
top属性 | 离上面的距离,y轴坐标 |
left属性 | 离左边的距离,x轴坐标 |
绝对定位和相对定位:
1、相同点:
1)都脱离了文档流,都在文档流的上方
2、不同点:
1)坐标系不同,绝对的坐标系在浏览器的左上角,相对的坐标系在自己的左上角
2)占不占位,绝对不占位,相对占位
Z轴坐标z-index定位的高度:
img{
position:absolute;
left:100px;
top:100px;
}
.img1{
z-index:1;
}
<img src="bk.png" class="img1">
<img src="wq.png" class="img2">
实现绝对居中方法:
父div:position:relative
子div:position:absolute
父相对子绝对,父div的坐标系是它自己,子div的坐标系是父div的左上角
二十三、外边距
margin-top | 顶部外边距 |
margin-bottom | 下部外边距 |
margin-left | 左部外边距 |
margin-right | 右部外边距 |
margin | 后面只有一个值,就是作用在上下左右 后面写四个值,按照上-右-下-左的顺序作用于四边 |
二十四、内边距
padding-top | 顶部内边距 |
padding-bottom | 下部内边距 |
padding-left | 左部内边距 |
padding-right | 右部内边距 |
padding | 写四个值,和margin一样 |
二十五、浮动和清除浮动
float | 只有左浮动和右浮动。加了修饰的标签会浮动起来,left左侧浮动,把块标签右侧释放 |
<div style='clear:both'></div> | 清除浮动 |
浮动也会脱离文档流。一个块标签一旦浮动,它就会脱离文档流,一旦脱离文档流它就失去了独占一行的特点。
清除浮动
1、clear:left
浮动之后左侧不能有人
2、clear:right
浮动之后右侧不能有人
3、clear:both
浮动之后左右都不能有人
可以有效防止盒子回缩
可以解决div不漂浮,内部内容却漂浮,在div最后放一个<div style='clear:both'></div>
二十六、滚动条
overflow属性 | |
hidden | 超出了也不显示滚动条 |
auto | 自动判断滚动条 |
二十七、显示和隐藏
display属性 | |
none | 隐藏,不占位 |
block | 显示,以块标签显示,一个人独占一块 |
inline | 显示,以行标签显示,一个人独占一行 |
------------------------- | ---------------------------------------------------------------- |
visibility属性 | |
hidden | 隐藏,但是占位 |
visible | 显示,但是占位 |
二十八、边框样式
border-radius | 圆角,圆的直径是里面的值 |
border-radius: 5px | 这个5px是四个角角上的圆 |
border-radius: 128px | 四个角上的圆叠到一起了,就看到了一个圆 |
border-radius: 20px 50px | 对角线的圆直径 |
border-radius: 20px 50px 100px 128px | 四个角顺时针一圈 |
--------------------------------- | -------------------------------------------------- |
box-shadow: 5px 5px 5px 5px #F00 | 第一个值x偏移,第二个值y偏移,第三个值是阴影模糊值,第四个值是阴影外延值 |
--------------------------------- | -------------------------------------------------- |
border-image | 边框背景图 |
border-image-source | 所在边框的图片的路径 |
border-image-slice | 图片边框向内偏移 |
border-image-width | 图片边框的宽度 |
border-image-outset | 边框图片区域超出边框的量 |
border-image-repeat | 图片边框是否应平铺、铺满或拉伸 |