W3school:CSS基础:教程、简介、语法、选择器、使用(在HTML中引入)
教程、简介:
链接:/css/index.asp
一、CSS语法
1.CSS 规则集(rule-set)由选择器和声明块组成:
1)选择器指向您需要设置样式的 HTML 元素。
2)声明块包含一条或多条用分号分隔的声明。
3)每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。
4)多条 CSS 声明用分号分隔,声明块用花括号括起来。
2.实例:代码
<!DOCTYPE html><html><head><style>p {color: pink;text-align: center;} </style></head><body><p>Hello World!</p><p>这些段落是通过 CSS 设置样式的。</p></body></html>
效果:
解释:
1)在此例中,所有 p 元素都将居中对齐,并带有粉色(pink)文本颜色;
2)p 是 CSS 中的选择器(它指向要设置样式的 HTML 元素:p );
3)color 是属性,pink 是属性值;
4)text-align 是属性,center 是属性值。
百度:w3school:CSS 语法:链接:/css/css_syntax.asp
/css/css_syntax.asp
二、CSS 选择器
1.CSS 选择器用于“查找”(或选取)要设置样式的 HTML 元素。
2.CSS 选择器分为五类:
1)简单选择器(根据名称、id、类来选取元素)
2)组合器选择器(根据它们之间的特定关系来选取元素)
3)伪类选择器(根据特定状态选取元素)
4)伪元素选择器(选取元素的一部分并设置其样式)
5)属性选择器(根据属性或属性值来选取元素)
3.简单选择器(根据名称、id、类来选取元素)示例:
1)CSS 元素选择器:元素选择器根据元素名称来选择 HTML 元素。
代码:
<!DOCTYPE html><html><head><style>p {text-align: center;color: red;} </style></head><body><p>每个段落都会受到样式的影响。</p><p id="para1">我也是!</p><p>还有我!</p></body></html>
效果:
解释:
页面上的所有 p 元素都将居中对齐,并带有红色文本颜色。
2)CSS id 选择器:id 选择器使用 HTML 元素的 id 属性来选择特定元素。
1》元素的 id 在页面中是唯一的,因此 id 选择器用于选择一个唯一的元素!
2》要选择具有特定 id 的元素,请写一个井号(#),后跟该元素的 id。
3》代码:
<!DOCTYPE html><html><head><style>#para1 {text-align: center;color: green;}</style></head><body><p id="para1">Hello World!</p><p>本段不受样式的影响。</p></body></html>
效果:
解释:
CSS 规则将应用于 id=“para1” 的 HTML 元素。
注意:id 名称不能以数字开头。
3)CSS 类选择器:类选择器选择有特定 class 属性的 HTML 元素。选择拥有特定 class 的元素,请写一个句点(.)字符,后面跟类名。
代码:
<!DOCTYPE html><html><head><style>.center {text-align: center;color: grey;}</style></head><body><h1 class="center">居中的红色标题</h1><p class="center">居中的红色段落。</p> </body></html>
效果:
解释:
所有带有 class=“center” 的 HTML 元素将为灰色(grey)且居中对齐。
代码2:
指定只有特定的 HTML 元素会受类的影响。
<!DOCTYPE html><html><head><style>p.center {text-align: center;color: red;}</style></head><body><h1 class="center">这个标题不受影响</h1><p class="center">这个段落将是红色并居中对齐的。</p> </body></html>
效果:
解释:
只有具有 class=“center” 的 p 元素会居中对齐。
代码3:
HTML 元素也可以引用多个类。
<!DOCTYPE html><html><head><style>p.center {text-align: center;color: red;}p.large {font-size: 300%;}</style></head><body><h1 class="center">这个标题不受影响</h1><p class="center">本段将是红色并居中对齐。</p><p class="center large">本段将是红色、居中对齐,并使用大字体。</p> </body></html>
效果:
解释:
p 元素将根据 class=“center” 和 class=“large” 进行样式设置。
注意:类名不能以数字开头!
4)CSS 通用选择器:通用选择器(*)选择页面上的所有的 HTML 元素。
代码:
<!DOCTYPE html><html><head><style>* {text-align: center;color: blue;}</style></head><body><h1>Hello world!</h1><p>页面上的每个元素都会受到样式的影响。</p><p id="para1">我也是!</p><p>还有我!</p></body></html>
效果:
解释: CSS 规则会影响页面上的每个 HTML 元素。
5)CSS 分组选择器:分组选择器选取所有具有相同样式定义的 HTML 元素。
代码:
1》h1、h2 和 p 元素具有相同的样式定义:
h1 {text-align: center;color: red;}h2 {text-align: center;color: red;}p {text-align: center;color: red;}
对选择器进行分组,以最大程度地缩减代码。
对选择器进行分组,请用逗号来分隔每个选择器。
2》对上述代码中的选择器进行分组:
<!DOCTYPE html><html><head><style>h1, h2, p {text-align: center;color: red;}</style></head><body><h1>Hello World!</h1><h2>更小的标题</h2><p>这是一个段落。</p></body></html>
效果:
6)总结
所有简单的 CSS 选择器:
百度:w3school:CSS 选择器:简单选择器:链接:/css/css_selectors.asp
/css/css_selectors.asp
4.组合器选择器(根据它们之间的特定关系来选取元素)
5.伪类选择器(根据特定状态选取元素)
6.伪元素选择器(选取元素的一部分并设置其样式)
7.属性选择器(根据属性或属性值来选取元素)
三、CSS使用:添加 CSS
1.当浏览器读到样式表时,它将根据样式表中的信息来格式化 HTML 文档。
2.三种使用 CSS 的方法:有三种插入样式表的方法:
1)外部 CSS
2)内部 CSS
3)行内 CSS
3.外部 CSS
1)每张 HTML 页面必须在 head 部分的 link 元素内包含对外部样式表文件的引用。
2)外部样式在 HTML 页面 head 部分内的 link 元素中进行定义:
代码:
<!DOCTYPE html><html><head><link rel="stylesheet" href="/demo/css/mystyle.css"></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>
效果:
3)外部样式表可以在任何文本编辑器中编写,并且必须以 .css 扩展名保存。
外部 .css 文件不应包含任何 HTML 标签。
“mystyle.css” 是这样的:
body {background-color: lightblue;}h1 {color: navy;margin-left: 20px;}
注意:请勿在属性值和单位之间添加空格(例如 margin-left: 20 px;)。正确的写法是:margin-left: 20px;
4.内部 CSS
1)如果一张 HTML 页面拥有唯一的样式,那么可以使用内部样式表。内部样式是在 head 部分的 style 元素中进行定义。
2)实例:内部样式在 HTML 页面的 head 部分内的 style 元素中进行定义:
代码:
<!DOCTYPE html><html><head><style>body {background-color: linen;}h1 {color: maroon;margin-left: 40px;} </style></head><body><h1>这是一个标题</h1><p>这是一个段落。</p></body></html>
效果:
5.行内 CSS
1)行内样式(也称内联样式)可用于为单个元素应用唯一的样式。使用行内样式,请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。
2)实例:行内样式在相关元素的 “style” 属性中定义:
代码:
<!DOCTYPE html><html><body><h1 style="color:blue;text-align:center;">这是标题</h1><p style="color:red;">这是一个段落。</p></body></html>
效果:
提示:行内样式失去了样式表的许多优点(通过将内容与呈现混合在一起)。请谨慎使用此方法。
6.多个样式表
1)在不同样式表中为同一选择器(元素)定义了一些属性,则将使用最后读取的样式表中的值。
2)实例:
1》外部样式表为 h1 元素设定的如下样式:
h1 {color: navy;}
2》内部样式表也为 h1 元素设置了如下样式:
h1 {color: orange; }
3》如果内部样式是在链接到外部样式表之后定义的,则 h1 元素将是橙色:
<head><link rel="stylesheet" type="text/css" href="mystyle.css"><style>h1 {color: orange;}</style></head>
4》如果在链接到外部样式表之前定义了内部样式,则 h1 元素将是深蓝色:
<head><style>h1 {color: orange;}</style><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
7.层叠顺序
当为某个 HTML 元素指定了多个样式时,会使用哪种样式呢?
页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表,其中第一优先级最高:
行内样式(在 HTML 元素中)
外部和内部样式表(在 head 部分)
浏览器默认样式
因此,行内样式具有最高优先级,并且将覆盖外部和内部样式以及浏览器默认样式。
百度:w3school:CSS使用:链接:/css/css_shiyong.asp
/css/css_shiyong.asp