CSS详解

高洛峰Original: 2016-10-20 13:26:451094Durchsuche

CSS的简介

1、CSS概述及作用

　　CSS：Cascading Style Sheets）是层叠样式表用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。
　　作用：CSS将网页内容和显示样式进行分离，提高了显示功能。

2、 CSS和HTML的结合（*****）（四种）

　　CSS与HTML的结合方式

　　1.style属性方式：

　　利用标签中style属性来改变每个标签的显示样式。

　　例：　　

p标签段落内容。

　　该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。

　　2.style标签方式：（内嵌方式）

　　在head标签中加入style标签，对多个标签进行统一修改。　　

<head>
    <style type=”text/css”>
        p { color:#FF0000;}
    </style></head>

　　该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。

　　3.导入方式：（常用的方式）

　　前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到，那么就用到这种方式。

　　例：

<style type="text/css">
    @import url(css_3.css);
    div { color:#FF0000;}</style>

　　定义一个外部的CSS文件（.css）结尾的。
　　@import url("css文件的地址");需要写在

　　注：url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复，以本页定义样式为准。

　　4.链接方式：（常用的方式）

　　通过head标签中link标签来实现，前提也是先要有一个已定好的CSS文件。

　　例：　　

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

　　<link rel="stylesheet" type="text/css" href="CSS文件的地址" > ，不能写在<style>内部，写在<head>标签的内部。
　　rel：代表当前的文件和引入文件的关系。
　　type：类型
　　href：CSS的地址

　　注：可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。

3、CSS样式优先级和代码规范

　　1.CSS的优先级

　　（一般情况下）从上到下，由外到内，优先级从低到高的。
　　特殊情况：标签名选择器

　　2. CSS的代码规范

　　（1）选择器名称{属性名:属性值;属性名:属性值;...}

　　（2）属性与属性之间用分号隔开
　　（3）属性与属性值直接按用冒号连接

　　（3）如果一个属性有多个值，值与值直接用空格隔开
　　例子　

div{border:值1 值2 值3}

4、CSS的选择器（*****）

　　1.选择器：

　　编写的CSS代码作用在哪个标签上。

　　2.基本选择器：

　　（1）标签名选择器

　　每一个标签都定义了class属性和id属性。用于对标签进行标识，方便对标签进行操作。
　　在定义的中，多个标签的class属性值可以相同，而id值要唯一，因为JavaScript中经常用。

　　（2）class选择器：（常用的）
　　在标签中定义class属性并赋值。通过标签名.class值对该标签进行样式设置。
　　例：
　　相同标签设置不同样式的时候，用class进行区分。

p.pclass_1 {color:#FF0000;}
p.pclass_2 {color:#0000FF;}
<p class=”pclass_1”>P标签样式</p><p class=”pclass_2”>P标签样式</p>

　　不同标签进行相同设置的时候，用class进行统一定义。

.classname {color:#00FF00;}

P标签样式

DIV标签样式

　　（3）id选择器：
　　与class选择器类似，但格式不同，选择器的名称为：#id值。
　　例：

#pid { color:#0000FF;}

P标签样式

　　注：多个标签同样可以定义相同的id值，但是对于JavaScript对标签元素的获取就会出错。所以形成习惯，确保id值的唯一性对于以后的数据库设计也很有好处。

　　优先级（特殊）：
　　标签名选择器

　　3.扩展选择器：

　　（1）关联选择器：多个标签之间产生关系。
　　中间用空格隔开
　　（2）组合选择器：对多个不同的选择器设置相同的样式
　　中间用逗号隔开
　　（3）伪元素选择器：CSS定义好的选择器
　　如果使用超链接的4个状态，使用的顺序： L V H A

5、CSS的布局（了解）

* 盒子模型

心如猛虎，细嗅蔷薇。

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：css自动换行Nächster Artikel：css的四种书写方式

In Verbindung stehende Artikel

Mehr sehen