css:层叠样式表
注释:/**/
语法结构:选择器 {属性:值;属性:值……}
三种引入方式:style,link,行内式
学习流程:1.学会如何查找标签 2.学会如何添加样式
如何查找标签
基本选择器
id选择器:# id值{}
类选择器:. class值{}
元素/标签选择器:标签 {}
通用选择器:* {}
组合选择器
后代选择器:div span{} 选择div内部所有的span
儿子选择器:div>span{} 选择div儿子级别的span
毗邻选择器:div+span{} 选择div同级别下一个span
弟弟选择器:div~span{} 选择div同级别下面所有的span
属性选择器
含有某个属性:[username] 选择含有username属性的标签
含有某个属性等于某个值:[username="egon"] 选择含有username="egon"属性的标签
某个标签,含有某个属性等于某个值:input[username="egon"] 选择含有username="egon"属性的标签,并且为inpu的标签
分组与嵌套
div,p,span{} 选择所有的div,p,span标签
#d1,.c1,span{} 并列选择
伪类选择器
a:link{} visited,active,hover
input:focus{}
伪元素选择器
p::first-letter{} 选择p标签的第一个字母
p::before{} 在标签的开头添加样式,但是不可选中
p::after{} 在标签的最后添加样式,但是不可选中
选择器优先级
选择器相同 谁近就听谁的
选择器不同 id>类>标签>行内式
样式属性
长宽
height,width
行内标签无法设置长宽,即使写了也没有效果
设置字体属性
font-familiy
font-size
font-weight
color:rgba(255,255,255,0.4)
设置文字属性
text-align:center 居中
text-decoration:none 可以用来给a标签去掉下划线
text-indent:32px 文字缩进32px
设置边框属性
border-width
border-style
border-color
border:5px solid green
height:200px;width:200px;border-radius:50% 圆
display
display:none 隐藏标签,不展示到页面并且原来的位置不再占有了,但是还存在于文档上
display:inline 让块级标签变成行内标签的特点
display:block 让行内标签设置成块级标签的忒但
display:inline-block 让标签既可以在一行显示,又可以设置长宽
visibility:hidden 单纯的隐藏,位置还在
盒子模型
margin:外边距
padding:内边距
border:边框
content:内容
margin:0 auto; 让标签水平居中,竖直方向不可以
浮动
标签的排版布局:浮动的标签脱离正常的页面,浮动在空中
浮动的元素没有块级一说,本身多大浮动起来之后就只能占多大
.clearfix::after{content:‘‘;display:block;clear:both} 清除浮动的类
overflow
visible:默认就是可见,溢出还是能看到
hidden: 溢出部分直接隐藏
scroll: 加一个上下滚动条
width:100% 让宽度占父元素的100%
position
静态:所有的标签默认都是静态的,无法改变位置 static
相对定位:相对于标签原来的位置做移动position:relative;left:50px;top:50px;
绝对定位:相对于已经定位过的父标签做移动
position:absolute;left:50px;top:50px;
固定定位:相对于浏览器窗口固定在某个位置
position:fixed;
z-index,opacity
z-index,该值越大,离用户越近
opacity,不单单可以修改颜色的透明度,还可以修改字体的透明度