您现在的位置是：首页 > 技术学习 > CSS 网站首页 技术学习 CSS

CSS 全称：“层叠样式表”（Cascading Style Sheets），CSS用于定义HTML内容在浏览器内显示的样式，如文字大小，颜色，加粗，背景，位置，行高等等。CSS3中新加了许多样式，还增加了动画。

1-1 CSS代码语法

例：p{color:red;}

css代码有两部分组成：选择符和声明。
p：选择符。
    指页面里的p标签，选择符不仅能直接用标签名，还可以通过标签的id获取：#id名；class获取：.class名；等等
{color:red;} 
    {}里面为声明。用来写样式，声明由属性和值组成，属性和值用英文“:”隔开，
    多条声明之间用英文“;”隔开，
    最后一条声明可不加“;”，但为了方便修改常加上去。
    为了方便阅读，可将每条代码单独写一行。
    color是属性(字体颜色)。red是属性值。

1-2 CSS可以写在哪些地方

css书写分三种：内嵌式，嵌入式，外链式。

1-2-1 内嵌式

<p style="color:red;font-size:12px;">内嵌式</p>

把css代码直接写在html元素的开始标签的style属性里面，书写规则同上。

1-2-2 嵌入式

<style type="text/css">
    #myp {
        color:red;
        font-size: 12px;
    }
</style>

把css代码写在style标签里面，style标签一般放在head标签里面，其中#myp是根据id名获取的标签，某个标签起了id名myp，所以可以直接用#myp获取。

1-2-3 外链式

将样式写在一个.css类型的文件里面，然后使用link标签将该文件引入到页面里面。

/* 以.css结尾的文件，命名mycss.css */
#myspan {
    font-weight: bold;  /* 字体加粗 */
    font-family: "宋体"; /* 字体是宋体 */
}

另外一个html文件，命名test.html；使用link标签将css文件引入该html文件中。

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

1. link标签一般放在head标签里面。
2. rel="stylesheet" type="text/css" 是固定写法，用来声明引入的是什么文件。
3. href="../css/mycss.css" 是css文件的路径，可以放绝对路径和相对路径，
   绝对路径是指：“http://www.forexample.com/css/mycss.css” 这种类型，
   还有一种绝对路径是 “/css/mycss.css” 这种是省略了html文件当前所在的域名。
   还有一种绝对路径 “//www.forexample.com/css/mycss.css”，这种是省略了协议头，路径的协议头和页面协议头一样，即：页面是http，那该路径也是http，页面是https，该路径也是https
   本例中使用的是相对路径，../是指html文件的上一级文件夹。./或者不写是指当前级别文件夹，../css/mycss.css 是指：上一级文件夹 下的 css文件夹 下的 mycss.css文件。

1-2-4 三种样式的写法的优先级

如果一个元素分别用这三种方法定义了不同的字体颜色，那么这个字体显示哪一种颜色呢？
从本质上讲：元素样式是根据其权值来衡量的，权值高的优先显示。(权值后面会有解释)
如果先不考虑权值，三种样式优先级别：
内嵌式 > 嵌入式 > 外部式
即会显示内嵌式定义的那个颜色。(可以理解为就近原则，内嵌式离该标签最近，所以优先显示)

1-3 选择器

1-3-1 标签选择器

直接以标签名为选择符，例：

div {
    width: 100px;
    height: 100px;
}

1-3-2 ID选择器

给标签加一个id名(注：id名具有唯一性，一个html里面id名不能重复)，css书写用“#”+“id名字”
例：

<div id="mydiv">举个例子</div>

相应的css书写：

#mydiv {
    width: 100px;
    height: 100px;
}

1-3-3 类选择器

给标签加一个class名(注：class名不具唯一性，一个html里面的标签可以起相同class名，一个标签也可以起多个class名)，css书写用 “.”+“class名字”，类选择器可以修改所有叫该class名的标签样式。
例：

<div class="example mydiv">举个例子</div>
<p class="example">举个例子</p>

相应的css书写：

.example { /* div和p字体样式都会变为红色 */
    color: red;
}
.mydiv { /* div背景为黑色 */
    background: #000000;
}

1-3-4 子选择器

用于指定标签元素的第一代子元素(儿子)，写法：父元素+“>”+第一代子元素。例

<style>
    #box>ul { /* div下的ul的外填充为0 */
        margin: 0;
    }
    #box>.myp { /* #box下第一代子.myp字体颜色为红色 */
        color: red;
    }
</style>
<div id="box">
    <ul id="list">
        <li></li>
    </ul>
    <p class="myp">段落一</p>
    <p class="myp">段落二</p>
</div>

1-3-5 包含(后代)选择器

用于指定标签的所有后代(包括后代的后代)。写法：父元素+“ ”+子元素

<style>
    .box span { /* .box下的所有span标签字体颜色都能变为红色(不止第一代子元素)。 */
        color: red;
    }
</style>
<div id="box">
    <span>文本一</span>
    <p class="myp">
        <span>文本二</span>
    </p>
    <p class="myp">
        <span>文本三</span>
    </p>
</div>

1-3-6 通用选择器

作用于html里面所有标签。
写法：*

* { /* 说有标签的外边距为0，内填充为0 */
    margin: 0;
    padding: 0;
}

1-3-7 伪类选择器

书写方式：元素+“:”+伪类名。
常用的a标签：

a:hover { /* 这个a标签鼠标滑过是字体变为红色 */
    color: red;
}

a标签还有其他伪类,顺序为：a:link > a:visited > a:hover > a:active
其他标签也有:hover伪类。(IE6不支持a以外其他的伪类；IE6以上支持所有标签的hover伪类)

1-3-8 分组选择器

当一些标签拥有共同的样式，一个个写太麻烦，可以使用分组选择符。
书写方法：元素+“,”+元素+“,”+元素+“,”+元素 等

h1, span, p, #mydiv, .box {
    color: red;  /* 上面这些标签的字体都为红色 */
}

1-3-8 条件选择器

书写方法：元素+条件元素

<style>
    div#mydiv { /* 拥有id名叫mydiv的div有1px的黑色边框 */
        width: 100px;
        height: 100px;
        border: 1px solid #000;
    }
</style>
<div></div>
<div id="mydiv"></div>

1-4 影响样式的因素

元素样式都由哪些因素影响？

1-4-1 继承

css的某些样式具有继承性，拥有这些样式的元素的子元素也会具有这个样式，比如：color(对a标签无效？)

<style>
div { /* div字体为红色，里面的p标签颜色也为红色，但里面的a标签好像不会变红，需单独给a加该样式*/
    color: red;
}
</style>
<div>
    1
    <p>2</p>
    <a href="http://baidu.com">3</a>
</div>

1-4-2 权值

前面讲到，样式显示本质是显示权值高的的那个样式。
不同选择符的权值不同：

1. 继承：权值为0.1
2. 标签、伪类、伪对象：权值为1
3. 类选择符、属性选择符：权值10
4. id选择符：权值100
5. 内联样式：权值1000
6. !important : 权值无穷
   例：#mydiv .box p {} → 权值伪100+10+1=111。

1-4-3 层叠

同一元素，不同css样式，权值也一样。根据先后顺序，最后应用最后那个样式，类似就近原则。可以理解为后面覆盖了前面的样式。

p {
    color: blue;
}
p { /* 显示这个样式 */
    color: red;
}

1-4-4 重要性!important

!important 设置最高权值

p {    /* !important写在;前面 */
    color: red!important;
}

1-5 CSS常用的样式

1-5-1 最常见样式

1. 宽：width: 300px; 最小宽度：min-width: 100px；
2. 高：height: 200px; 最小高度：min-height: 100px;
3. 背景：background: #000000; 还可跟图片：background: url(' ') 2px 3px repeat-x;(背景图 x方向偏移量 y方向偏移量 重复方式)
4. 边框：border: 1px solid #cccccc; (边框线大小 边框样式实线 边框颜色)
5. 外边距：margin: 10px;
6. 内填充：padding: 5px;
7. 字体颜色：color: #333333;
8. 字体大小：font-size: 12px;
9. 行间距： line-height: 20px;
10. 浮动：float: left; 左浮动
11. 定位：position: relative; left: 10px; right: 5px; 相对定位。还有绝对定位：position:absolute; left: 10px; right: 5px; 固定定位：position: fixed; left: 10px; right: 5px;
12. 溢出样式：overflow: hidden; 溢出隐藏。还有溢出滚动：overflow: scroll; 等

1-5-2 会用到的样式

1. 字体：{ font-family: "宋体"; }
2. 粗体：{ font-weight: bold; }
3. 斜体：{ font-style: italic; }
4. 上划线：{ text-decoration: overline; }
5. 删除线(中划线)：{ text-decoration: line-through; }
6. 下划线：{ text-decoration: underline; }
7. 段落缩进：{ text-indent: 2em; }
8. 中文/字母间距：{ letter-spacing: 5px; }
9. 英文词间距：{ word-spacing: 3px; }
10. 块状元素里面的文本、图片对齐：{ text-align: left; }
11. 垂直对齐方式：{ vertical-align: top; }
12. 文本换行：{ word-wrap: break-word; }
13. 对象中空白处理：{ white-space: nowrap; }强制在一行显示
14. 文本大小写：{ text-transform: capitalize; }首字母大写
15. 光标样式：{ cursor: pointer; }
16. 光标颜色：{caret-color:red;}
17. 遮罩滤镜：{ opacity: 0.8; filter: alpha(opacity=80); } 用来控制透明度，filter为IE私有滤镜

 
个人CSDN博客