CSS

CSS的用处

　　CSS（Cascade Style Sheets）层叠样式表, 是一种用来表现 HTML（标准通用标记语言的 一个应用）或 XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 CSS目前最新版本为 CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相 对于传统 HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支 持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设 计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化 或者优化写法，针对各类人群，有较强的易读性。 CSS 是用来美化网页用的，没有网页则 CSS 毫无用处，所以 CSS 需要依赖 HTML 展示其 功能 。

 

用法

　　CSS 样式由选择器和一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个 CSS属性和属性值。

 

 　　　　

　　注意： css声明要以分号;结束，声明以{}括起来

　　　　　建议一行书写一个属性

　　　　　若值为若干单词，则要给值加引号，如 font-family: "agency fb";

　　　　　如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的(学到 js时就 会有所了解)。

　　嵌入式

　　　　嵌入式通过在 html页面内容开辟一段属于 css的代码区域，通常做法为在< head>标签中 嵌套<style>标签，在<style>中通过选择器的方式调用指定的元素并设置相关 CSS。

 

　　外联式

　　　　 在实际开发当中，很多时候都使用引入外联样式文件，这种形式可以使 html 页面更加清晰， 而且可以达到更好的重用效果。

 　　　　在外面书写一个css的文件，然后在HTML中通过link标签进行连接引入

　　行内式

　　　　在HTML需要加入格式的元素中使用style属性进行设置想要的格式，这就是行内式

这是一个标题

css文本设置

常用的应用文本的css样式：

• color 设置文字的颜色，如： color:red;

• font-size 设置文字的大小，如：font-size:12px;

• font-family 设置文字的字体，如：font-family:'微软雅黑';

• font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜

• font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗

• font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px '微软雅黑';

• line-height 设置文字的行高，如：line-height:24px;

• text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉

• text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

• text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中css颜色表示法

css的选择器

一、标签选择器

　　

*{
   margin:0;padding:0}div{
   color:red}   
     
      ....
     
   
     
     
      ....
     
   
     

 

二、id选择器

　　通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。

#p1 {
    font-weight: bold; }

三、元素选择器

p{
    color: red; font-size: 20px; }

四、类选择器

.hidden {
     display: none; }

 

五、属性选择器

　　选取元素带有属性或者带有值的属性

[id]{
    //选择所有的带有id的元素color: red; font-size: 20px; }

 

[id=div3]{
    color: green; font-family: "微软雅黑"; }//选取id=div3的元素

六、分组选择器

　　

h2 , #pre1 {
     color: orange;  font-style: italic; }

　　　　CSS样式的优先级，是根据选择器的精确度/权重来决定的，常见的权重如下，权重越大， 优先级越高 元素：1 类：10 id：100 内联样式：1000　　

七、组合选择器

　　CSS组合选择器说明了两个选择器直接的关系。 CSS组合选择符包括各种简单选择符的组 合方式。 在 CSS3 中包含了四种组合方式: 后代选取器(以空格分隔)，子元素选择器(以大于号分 隔），相邻兄弟选择器（以加号分隔），普通兄弟选择器（以波浪线分隔）。

　　

　　　　后代选择器：主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。

.food  li {
    border: 1px solid red; }     
食物
           
     
                
      
水果                     
       
                          
        
香蕉
                          
        
苹果
                          
        
梨
                     
       
                
            
      
蔬菜                 
       
                      
        
白菜
                
        
油菜
                 
        
卷心菜
             
       
        
   
     

　　　　子元素选择器：用于选择指定标签元素的第一代子元素，以大于号分隔

.food > li {
     border: 1px solid red; }

　　　　相邻兄弟选择器：可选择紧接在另一元素后的元素，且二者有相同父元素。以加号分隔

　　

#d + div {
     border: 1px solid red; }

　　　　普通兄弟选择器：选择紧接在另一个元素后的所有元素，而且二者有相同的父元素，以波浪线分隔

li ~ li {
     background-color : yellow; } //选择器 1 ~ 选择器 2 {......}