CSS选择器

CSS选择器

CSS称之为层叠样式表（Cascading Style Sheet）。
​
在网页制作时可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
​
让HTML制作出来的网页更加漂亮，页面更容易维护。

CSS美化的好处

功能上 
比HTML属性更加强大，可以实现HTML属性中不能实现的功能
​
耦合度 
代码降低了耦合度，分工更加明确，张三编写HTML，李四编写CSS，再将二者合二为一。
HTML：用于制作网页的结构。相当于：建房子
CSS：用于网页的美化。相当于：装修
​
所以项目中，HTML要配置CSS使用。
多个HTML可以使用同一个CSS，从而让HTML和CSS分离开发。

CSS的编写规范

选择器 {
    样式名 ：样式值 ;
    样式名 ：样式值 ;
}
​
规范      说明                            
大括号     所有的样式都写在大括号内部 *{} .a{} #a{} .id{} #id{}          
​
样式名     字母全部小写，如果样式名有多个单词使用-分隔 .rg_left{text-align:left;}
​
样式值     /*所有样式名和样式值是固定的*/，名字与值之间使用冒号分隔  .rg_left{width:886px;}
​
样式结尾    每个样式使用分号结尾    .rg_left{width:886px;}
​
注释      /* 注释 */ 类似于Java中的多行注释        

CSS的位置

行内样式

只对一个标签起作用，使用style属性。
/*文本左对齐 文本颜色为红色*/
<td style="text-align:left;color:red">单元格</td>

内部样式

出现在HTML内部的样式，使用<style>标签。
/*只对这一个HTML页面起作用*/
​
/*设置所有元素样式的内，外边距为 0px，
设置 box-sizing：border-box，即：边框的宽和高就是盒子的宽和高，不会因为内边距或内容的变大而撑大。*/
<style type="text/css">
    *{
        padding: 0px;
        margin: 0px;
        box-sizing: border-box;
    }
</style>

外部样式

把CSS文件放在HTML的外部，使用的时候需要引入进来才可以使用。
​
引入了CSS的HTML文件都起作用。

引入方式一：推荐

<link type="text/css" rel="stylesheet" href="css/my.css"/>
type：指定文本的类型为CSS，固定写法              
rel：指定当前的HTML与CSS文件之间的关系是样式表的关系 relation，固定写法
href：指定样式文件地址                       

引入方式二：

import指令导入。其中： url函数，样式文件地址
<style type="text/css">
    @import url("css/my.css");
</style>

优先级

就近原则，哪个最近，就会覆盖前面的同名的样式。
​
行内样式 > （内部或外部样式）。
​
如果内部或外部样式同时出现，且又针对同一个标签，后者覆盖前者。

选择器的作用

使用设置好的样式之前，先要选中哪些元素/标签使用这些样式。
​
选中的方式通过选择器来操作。

基本选择器

标签选择器   
通过标签名选择同名的所有的标签 
标签名 { } 
/*a标签为超链接标签*/
a{
   color: #fc8989;
}
​
​
类选择器    
通过class属性的值选择元素 
.类名 { }     
前提：先给标签进行分类，使用class属性分类
类名：不能以数字开头
    . rg_form_left{
        width: 256px;
        float: left;
        padding-top: 20px;
        padding-left: 20px;
    }
​
ID选择器   
通过属性ID选择元素      
#ID { }     
前提：先给标签指定ID属性 
唯一：建议ID在同个网页中唯一，不要重复  
#username{
        font-size: 20px;
        color:#a6a6a6 ;
    }
​
通用选择器   
选中整个网页中所有的元素    
* {}  
​
 *{
        padding: 0px;
        margin: 0px;
        box-sizing: border-box;
    }

基本选择器之间的优先级

ID选择器（#/id）> 类选择器（./class）> 标签选择器（div）> 通用选择器（*）

扩展选择器

/*由基本选择器组合而成，可以有更加灵活的选择方式。*/

层级选择器   
父选择器  子孙选择器{ }                              
选择某个元素下面的所有子孙元素                             
中间至少一个空格
/*p标签下的a标签*/
p a{
    color: #fc8989;
}
.rg_form_right p a{
    font-size: 14px;
}
​
​
属性选择器   
标签名[属性名]  标签名[属性名="属性值"]{}                  
包含属性名即可
属性名=属性值才可以通过属性名和属性值选中符合条件的元素[ ] 中括号  
input[type="text"]{
        width: 200px;
        height: 32px;
    }
table input[type="text"]{
        width: 200px;
        height: 32px;
    }
​
​
​
伪类选择器   : 冒号 {} 
链接：
a:link 正常状态 
a:visited 访问过的 
a:hover 鼠标悬停 
a:active 正在激活 
:focus 文本/密码框得到焦点   
元素在操作的过程中，不同的状态呈现不同的样式    
正在操作的元素表示得到了焦点  
a:visited{
    color: gray;
}
a:active{
    color: lawngreen;
}
:focus{
    background-color: deepskyblue;
}
td:first-child{
    width: 293px;
    height: 50px;
}
table tr td:last-child{
    width: 293px;
    height: 50px;
}
  
​
并集选择器   选择器1 , 选择器2{}    
同时使用2个选择器的和, 逗号        
td,a,p{
    width: 293px;
    height: 50px;
}
   table input[type="text"],table input[type="date"],table input[type="password"],table input[type="email"]{
        border-radius: 4px;
        border: 1px solid #a6a6a6 ;
    }

扩展选择器之间的优先级

 (属性|伪类)  > 层次 > 并集
​
 当属性，伪类都出现时，后者覆盖前者

常见的CSS样式

背景样式

背景色     
background-color    
颜色常量，如：red使用十六进制，
如：#123，#112233使用rgb(红,绿,蓝)，如：
background-color  rgb(255,200,150)
​
​
背景图片    
background-image  url( “图片文件”)，
如：background-image  url(“img/girl.jpg”)  
​
​
平铺方式    
background-repeat   repeat 默认。
背景图像将在垂直方向和水平方向重复。 
repeat-x 背景图像将在水平方向重复。 
repeat-y 背景图像将在垂直方向重复。 
no-repeat 背景图像将仅显示一次。
​
​
背景位置    
background-position left  top，
如：background-position:10px 20px
​
​
背景大小    
background-size width  height，
如：background-size: 100px 100px
​

文本样式

颜色      
color           
颜色常量，如：red使用十六进制，
如：#123，#112233使用rgb(红，绿，蓝)函数
​
设置行高    
line-height     单位是像素，px 
​
文字修饰    
text-decoration 
underline 下划线
overline 上划线
line-through 删除线
​
文本缩进    
text-indent     
用于缩进文本，可以使用em单位，表示缩进2个字符，无论字符的大小。
​
文本对齐    
text-align      
left 把文本排列到左边。 
right 把文本排列到右边。 
center 把文本排列到中间。
默认值：由浏览器决定。

字体样式

字体名     
font-family 设置字体，本机必须要有这种字体  
​
设置大小    
font-size   单位：像素 
​
设置样式    
font-style  字体设置为斜体italic 浏览器会显示一个斜体的字体样式。normal 默认值。浏览器显示一个标准的字体样式。
​
​
设置粗细    
font-weight bolder加粗