CSS概述、基础语言及运用（2）

1.CSS的概述

CSS指层叠样式表（Cascading Style Sheets）。

2.Css 页面引入的方法：

（1）行内样式/内联样式：通过标签的 style 属性，在标签上直接写 样式。
<div style="width:100px; height:100px; color:red "> </div>

（2）内嵌样式：通过 style 标签在网页上创建嵌入的样式。
<style type="text/css">
div{
width:100px; height:100px; color:red
}
</style>

（3）外联样式：通过 link 标签，链接到外部样式表到页面中。
<link rel="stylesheet"  type="text/css" href="xxxx.css">
通过@import，链接到外部样式表到页面中。
@import + 空格+ url(CSS文件路径地址);
<style type="text/css">
@import url(CSS文件路径地址);
</style>

link与@import区别与选择
首页link和import语法结构不同，前者是html标签，只能放入html源代码中使用，后者可看作为css样式，作用是引入css样式功能。import在html使用时候需要

本质上两者使用选择区别不大，但为了软件中编辑布局网页html代码，一般使用link较多，也推荐使用link。

注：
三种引入方法的优先级：
<1>第一是行内样式/内联样式
<2>第二是内嵌样式
<3>第三是外联样式
最高优先级， 超越上述所有， !important
如 background-color: #000 !important;

外联样式的优点：
①可以在多个文档间共享样式表，对于较大规模的网站，将CSS样式定义独立成一个一个的文档，可有效地提高效率，并有利于对网站风格的维护。
②可以改变样式表，而无需更改HTML文档，这也与HTML语言内容与形式分开的原则相一致。
③可以根据介质有选择的加载样式表。
（所以在企业一般采用外联样式）

3.CSS的基本语法

CSS的定义方法是: 选择器 { 属性: 值 ; 属性: 值;}
选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。

代码示例：div{width:100px; height:100px; color:red}

选择器（六种）
（1）html标签选择器：标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。
语法格式-------------》选择器{}
（2）ID选择器：通过 id 名来选择元素，元素的 id 名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id 名一般给程序使用，所以不推荐使用 id作为选择器。
语法格式-------------》#+id名称{}
（3）class类选择器：通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是 css 中应用最多的一种选择器。
语法格式-------------》.+class名称{}
（4）匹配后代元素选择器：是层级选择器的一种，主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
语法格式-------------》选择器 选择器{}
--------匹配子元素选择器：也是层级选择器的一种，主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
语法格式-------------》选择器>选择器{}
（5）伪类选择器：常用的伪类选择器有 hover，表示鼠标悬浮在元素上时的状态。
语法格式-------------》选择器:hover{} 注：(一般针对超链接)
--------伪元素选择器：伪元素选择器有 before 和 after,它们可以通过样式在元素中插入内容。
语法格式-------------》选择器:after{}
（6）组合元素选择器：多个选择器，如果有同样的样式设置，可以使用组选择器。
语法格式-------------》选择器,选择器{}

4.CSS样式

（1）常用的应用文本的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
设置文字的下划线，如：textdecoration:none; 将文字下划线去掉

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

text-align
设置文字水平对齐方式，如text-align:center 设置文字水平居中

（2）常用的背景的CSS样式：

background-color 设置背景颜色
background-image 设置背景图片地址
background-repeat 设置背景图片如何重复平铺
background-position 设置背景图片的位置
background-attachment 设置背景图片是固定还是随着页面滚动条滚动

（3）颜色的表示方法：

颜色名表示，比如：red 红色，gold 金色
rgb 表示，比如：rgb(255,0,0)表示红色
16进制数值表示，比如：#ff0000 表示红色，这种可以简写成#f00

（4）CSS列表、表格

《1》列表：
CSS列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。
list-style------------------》简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image---------》将图像设置为列表项标志。
list-style-position-------》设置列表中列表项标志的位置。
list-style-type------------》设置列表项标志的类型。

《2》表格
border-collapse---------》设置是否把表格边框合并为单一的边框。
border-spacing----------》设置分隔单元格的距离。
caption-side--------------》设置表格标题的位置。
empty-cells---------------》设置是否显示表格中的空单元格。
table-layout---------------》设置显示单元、行和列的算法。

5.CSS轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘
的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
outline----------------------》在一个声明中设置所有的轮廓属性。
outline-color--------------》设置轮廓的颜色。
outline-style--------------》设置轮廓的样式。
outline-width-------------》设置轮廓的宽度。

<div style="width:200px;height:50px;border:1px solid red;
outline:dashed #00ff00 thick;">
</div>