18.9.14 下午 第40天上课

18.9.14 下午 第40天上课

 

18.9.14 下午 第40天上课

18.9.14 下午 第40天上课

18.9.14 下午 第40天上课

18.9.14 下午 第40天上课

18.9.14 下午 第40天上课

CSS中的常用选择器
常用三种选择器
标签选择器
            p{
                color: red;
            }
id选择器
             id:(唯一性)
             id命名:数字、字母、下划线、中划线(-),不能用数字开头
            
            #p_1{
                font-size: 30px;
                color: yellowgreen;
            }
class选择器
            .p_2{
                font-weight: bold;
                
                color: yellow;
            }
三种选择器的优先级:
      id选择器>class选择器>标签选择器

18.9.14 下午 第40天上课
  

18.9.14 下午 第40天上课


CSS中其他选择器

后代选择器   只要包含该标签对象即可  
            div span{
                font-size: 27px;
                font-family: 宋体;
                color: red;
            }
子选择器 直系子标签
div>span{
             color: red;
           }
兄弟选择器  只会改变下面相邻的元素对象
          #p_1+p{
              color: green;
}
兄弟选择器  后面所有的兄弟对象都会改变
        #p_1~p{
             
             color: red;
             
             font-size: 30px;
             
         }
        
伪类选择器  需要按照顺序写,否则效果将不显示
a:link{text-decoration:none}未访问过的。
a:visited{color:#ccc} 访问过
a:hover{color: red;text-decoration:red}鼠标放在超链接上,显示红色并有下划线。
a:active{color:#FF7400} 选定链接

18.9.14 下午 第40天上课

18.9.14 下午 第40天上课

18.9.14 下午 第40天上课

18.9.14 下午 第40天上课

字体:(font)
          /*字体的颜色*/
                color: gray;
                /*字体的大小*/
                font-size: 12px;
                /*字体的加粗*/
                /*font-weight: bold;*/
                /*字体的风格*/
                /*font-family: 宋体;*/
                /*字体倾斜*/
                /*font-style: italic;*
文本(text)
            /*下划线展示*/
                text-decoration: underline;
            /*去除下划线*/
                text-decoration: none;
          /*表示某段文字不可用*/
           text-decoration:line-through;
            /*文本居中*/
                text-align: center;
         /**文本水平居中*/
        Line-height=文本所在父元素的高度
border属性有三个修饰属性
     
?border-color  
?border-color:red;
?border-top-color:blue;
?border-width  
?border-width: 1px;
?border-left-width: 3px;
?border-style
?border-style: solid
?border-bottom-style: solid;
?可以使用border统一设置
?border: 1px solid red;
border-right: 5px dotted blue;
.border: 边框的大小 边框的样式 边框的颜色

===========================================================================

18.9.14 下午 第40天上课

18.9.14 下午 第40天上课

18.9.14 下午 第40天上课

18.9.14 下午 第40天上课

 

 

 

相关文章: