CSS的基础学习

时间 2019-11-19

标签 css 基础学习栏目 CSS 繁體版

原文原文链接

CSS学习css

--------学习资源html

http://www.csszengarden.com/web

CSS语法检查http://jigsaw.w3.org/css-validator/安全

配置CSS的方法：学习

1.行内式spa

行内式经过直接设置元素的style属性来引入css.net

<div style="width: 100px; height: 100px;">行内式</div>htm

优势：元素的样式简单明了blog

缺点：代码不易维护utf-8

2.内嵌式

经过在head标签中加入style标签来引入CSS

<head>

/*样式*/

</style>

</head>

缺点：不能被多个页面重复使用

3.连接式

经过link标签来引入CSS文件

<head>

</head>

优势：页面在加载元素的同时也会加载其样式

缺点：增长了http请求

4.导入式

经过在head标签中加入style标签及@import来引入CSS

<head>

@import""

</style>

</head>

缺点：导入式会在整个页面加载完毕后，再加载CSS文件，这样会致使页面在打开时，先显示的是无样式的页面，闪烁一下以后，页面才有了样式

CSS选择符和声明：

CSS语法基础

CSS样式规则选择符

选择符能够是HTML元素名称，类名或id

CSS样式规则声明

声明是你要设置的CSS属性（例如颜色）及其值

一个选择符要配置多个属性能够用分号（；）

例：body{color: blue; background-color: yellow}将网页配置成黄底蓝字

若是须要更多的颜色就能够参考http://webdevbasics.net/color的”网页安全调色板”

body{color: #3399cc; background-color: #FFFFCC}将网页配置成浅黄底中蓝字

配置内联CSS：

经过修改style实现

可是若是在body内<p style="color: red">文本 </p>就会覆盖了body的全局样本。若是有10个段落都须要以这种方式配置，就会形成大量冗余代码，所以并不高效

配置嵌入CSS：

嵌入样式应用于整个网页文档，这种样式要放到网页head部分的<style>元素中。

例子：

<head>

<title>Trillium Media Design</title>

<style>

body{ background-color: #E6E6FA;color: #191970}、

h1{background-color: #AEAED4;color: #191970}

</style>

</head>

配置外部CSS：

当CSS位于网页文档外部的时候，CSS的灵活性与强大才真正的显露无疑。外部样式表是包含CSS样式的文本文件，使用.css拓展名。这种.css文件经过link元素与网页关联。所以多个网页能够关联一个.css文件。.css文件不包含任何HTML标记----它只含CSS样式规则

优势是只需在一个文件内配置样式

Link元素

Link元素位于网页的head部分，是独立标记(void标记).link元素使用三个属性：rel , href和type

rel属性的值是”stylesheet”
href属性的值是.css文件名
type的属性的值是”text/css”,这个是CSS的MIME类型。Type在HTML5中可选，但在XHTML中必须

例如

CSS的class, ID和后代选择符

------这些东西都要放在<style></style>里

例子 <style>

.feature{color : #FF0000;}

main p {color : #00ff00;}

#new {color: #FF00CC;}

</style>

Class选择符:

Class选择符配置一类CSS规则，并将其应用于网页的一个或多个区域，配置一类样式时，要将选择符配置成类名。在类名前添加句点符号（.）。类名必须以字母开头，可包含数字，连字号和下划线可是不能有空格，如下代码配置名为feature的一类样式

.feature{color: #FF0000;}

一类的样式能够应用于任何元素。这是使用class属性作到的

例：<li class=”feature”>123456</li>

ID选择符：

Class用于网页上屡次响应使用，而id在每一个网页上只能使用一次。配置id时记得在前面添加#号

#content{color:#333333;}

后代选择符:

用后代选择符在容器元素的上下文配置一个元素。

例如：将main元素中的段落配置成绿色文本

main p {color : #00ff00;}

span元素

<span>元素在网页中定义一个上下不留空的内联区域。以<span>标记开头,以</span>结尾。适合格式化一个包含在其余区域（好比<p>

,<blockquote>或<div>)中的区域。

CSS的层叠（局部优先，做用范围越小越优先）

例如导入的.css中body { background-color: #FFFFCC（黄色）;

color: #000000（黑色）; }

可是同时又在html的head中定义

<style>

body { color: #0000FF（蓝色）; }

</style>

显示的页面为黄底蓝字