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。

<style type="text/css">
     p { color: blue; font-size: 40px; }
</style>

　　外联式

　　　　在实际开发当中，很多时候都使用引入外联样式文件，这种形式可以使 html 页面更加清晰，而且可以达到更好的重用效果。
　　　　在外面书写一个css的文件，然后在HTML中通过link标签进行连接引入

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

　　行内式

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

<h1 id="id1" style="color:red; font-size:10px;">这是一个标题</h1>

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}   


<div>....</div>   <!-- 对应以上两条样式 -->
<div class="box">....</div>   <!-- 对应以上两条样式 -->

二、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; } 


    <h1>食物</h1>   
        <ul class="food">    
            <li>水果     
                <ul>     
                     <li>香蕉</li>     
                     <li>苹果</li>      
                    <li>梨</li>     
                </ul>    
            </li>    
        <li>蔬菜     
            <ul>      
                <li>白菜</li>
                <li>油菜</li> 
                <li>卷心菜</li>
             </ul>
        </li>
   </ul>

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

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

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

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

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

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

CSS的知识点

CSS