我要学前端 - -＞＞css常用选择器与样式

CSS语法：

选择符{属性:属性值;属性:属性值;}

注意:
1.当一个属性有多个属性值时,属性值与属性值不分先后顺序
2.空格换行等不影响属性显示

css常用选择符

选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素

主要分为:
1.元素选择符
2.ID选择符
3.类选择符
4.通配符选择符
5.群组选择器
6.包含选择器
7.伪类选择器

元素选择符

元素选择符也就是已经存在的标签的元素名称;(比如已存在

标签)
语法：

div{属性:属性值;}

id选择符

当结构要体现单一样式时,就使用id选择符;在整个html文件当中id选择符是唯一的,主要是为了后续使用js时不报错;
语法：

#id名{属性:属性值;}

类选择符

在整个html文件当中如果某一类标签想要使用同一个样式时则使用类选择符;
语法：

.class名{属性:属性值;}

通配符选择符

在整个html文件当中如果想要选中所有元素，则用通配选择符；但通常使用去掉所有边距，比如：*{margin:0;padding:0;}
语法：

*{属性:属性值;}

群组选择器

在整个html文件当中，如果多组样式，但有部分相同的样式，则可以提取出来写在一个样式中，并且选择符与选择符之间用逗号隔开，就是群组选择器；
语法：

选择符1,选择符2,{属性:属性值;}

包含选择器

在整个html文件当中，当我们为某便签下的子标签添加样式时，就可以使用包含选择器，注意父选择符与子选择符之间用空格隔开；
语法：

父选择符 子选择符{属性:属性值}

伪类选择器

在整个html文件当中，当我们向某些选择器添加特殊的效果，就可以使用伪类选择器；

语法(通常与a标签一起使用)：

a:link{color:##FF0000}     /*未访问的链接*/
a:visited{color:#00FF00}   /*已访问的链接*/
a:hover{color:#FF00FF}     /*鼠标移动到链接上*/
a:active{color:#0000FF}    /*选定的链接*/

选择器优先级

css常用样式

css常用的样式：

1. 常用文本样式
2. 列表相关属性
3. 背景图属性
4. 浮动属性

常用文本样式

font-size文字大小默认16px
font-family字体font-style是否倾斜italic-倾斜normal-正常(通常用于去倾斜)
font-weight是否加粗bold-加粗normal-正常
line-height行高第二行底部到第一行底部的高度
text-decoration文本修饰underline-下划线overline-上划线line-through文本穿过的线none-默认无线
text-indent首行缩进每个字体大小*缩进个数(仅对第一行有作用,可以取负值)color文字颜色

颜色表示法

1.颜色名表示-例如:red
2.rgb表示-例如：rgb(255,0,0)->255255255表示红色(注:不常用)
3.rgba表示-相对于rgb来说加了透明度rbga(255,0,0,0.6)
4.16进制数值表-比如：#ff0000表示红色

列表相关属性

list-style-type:disc-实心圆square-正方形circle-空心圆none-无
list-style-image:url(相对路径)
list-style-position:outside(外边),inside(里边)
list-style:none(最常用)

背景图属性

background-color:颜色值;
background-image:url(相对路径);

注意:当容器尺寸=图片尺寸->刚好
当容器尺寸>图片尺寸->图片平铺
当容器尺寸<图片尺寸->仅显示容器以内的背景图

background-repeat:no-repeat不平铺;repeat平铺;repeat-x横向平铺;repeat-y纵向平铺;
background-position:水平(left/center/right)垂直(top/center/bottom);上面四个属性缩写为一个(常用)：
background:背景色url(背景图相对路径)no-repeatcentertop;

• 浮动属性

浮动主要为了脱离文档流(垂直排列)
   语法:
       选择符{float:left/right}
       特点：1.div块元素失去“块状”换行显示特征，变为行内元素
       2.紧贴上一个浮动元素(同方向)或父级元素的边框，如宽度不够将换行显示
       3.占据行内元素(文字段落)的空间，导致行内元素围绕显示