CSS样式与选择器精要-优快云博客

本文链接：https://blog.youkuaiyun.com/six_666666/article/details/78327962

 
 css 
 使用必要性 
 1.  
 可以很好的统一网站的显示风格 
 . 

 
 css 
 使用的基本语法 

 
 选择器 
 { 

 
 属性 
 1:  
 属性值 
 ; 

 
 属性 
 2:  
 属性值 
 ; 

 
 … 
 . 

}

 
 Html 
 文件 
 : 

 
 <html> 

 
 <!--css  
 部分可以单写一个文件，然后引入，也可以直接嵌入到该 
 html 
 文件 
 --> 

 
 <link rel="stylesheet" type="text/css" href="demo2.css"/> 

 
 <body> 

 
 <!--span 
 元素通常用于存放小块内容 
 --> 

 
 <span class="s1"> 
 栏目一 
 </span> 

 
 <span class="s1"> 
 栏目二 
 </span> 

 
 <span class="s1"> 
 栏目三 
 </span> 

 
 <span class="s1"> 
 栏目四 
 </span> 

 
 <span class="s1"> 
 栏目五 
 </span> 

 
 </body> 

 
 </html> 

 
 Css 
 文件 
   
 ： 

 
 /*.s1  
 用术语 
   
 类选择器 
 */ 

 
 .s1{ 

 
        color: blue; 

 
        font-size: 30px; 

 
        font-style:italic; 

 
        text-decoration:underline; 

}

 
 .s2{ 

 
        color:yellow; 

 
        font-size:12px; 

}

 
 .s3{ 

 
        color:blue; 

 
        font-style:italic; 

}

 
 .s4{ 

 
        color:green; 

 
        font-weight:bold; 

}

 
 .s5{ 

 
        color:#9C3131; 

}

 
 Css 
 必要性 
 2  
 可以使用滤镜 

 
 <html> 

 
 <head> 

 
 <!-- 
 如何把 
 css 
 直接嵌入到 
 html 
 文件 
 ( 
 内联 
 css)--> 

 
 <style type="text/css"> 

 
        a:link img{ 

 
               filter:gray; 

}

 
        a:hover img{ 

 
               filter:""; 

}

 
 </style> 

 
 </head> 

 
 <body> 

 
 <a href="3"><img src="2.jpg"/></a> 

 
 <a href="3"><img src="3.jpg"/></a> 

 
 <a href="3"><img src="4.jpg"/></a> 

 
 <a href="3"><img src="cat1.jpg"/></a> 

 
 </body> 

 
 </html> 

 
 Css 
 中常用的四种选择器 

 
 1.       
 类选择器 
 (class 
 选择器 
 ) 

 
 基本使用 

 
 . 
 类选择器 
 { 

 
      
 属性名 
 :  
 属性值 
 ; 

 
 … 
 .

}

 
 2.      id 
 选择器 

 
 基本使用 

 
 #id 
 选择器 
 { 

 
      
 属性名 
 :  
 属性值 
 ; 

 
 … 
 .

}

 
 案例 
 : 

 
 /*id 
 选择器的使用 
 */ 

 
 #id1{ 

 
        background-color:silver; 

 
        font-size:40px; 

}

 
 3.      html 
 元素选择器 

 
 某个 
 html 
 元素 
 { 

 
      
 属性名 
 : 
 属性值 
 ; 

…

}

 
 Table{ 

}

P{

}

 
 Button{ 

}

 
 // 
 对 
 html 
 元素样式分类 

 
 P:cls{ 

}

 
 <p class= 
 ” 
 cls 
 ” 
 ></P> 

css的三大样式