前端基础之CSS（第二天）

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，不单单可以修改颜色的透明度，还可以修改字体的透明度