目录1. 添加CSS2. 样式化HTML元素3. 改变元素的默认行为4. 使用类名5. 根据元素在文档中的位置确定样式6. 根据状态确定样式7. 同时使用选择器和选择符参考1. 添加CSS给定HTML文档。!doctypehtmlhtmllangenheadmetacharsetutf-8/title开始学习 CSS/title/headbodyh1我是一级标题/h1p这是一个段落文本。在文本中有一个spanspan element/span并且还有一个ahrefhttp://example.com链接/a./pp这是第二段。包含了一个em强调/em元素。/pulli项目 1/lili项目 2/lili项目em三/em/li/ul/body/html让HTML文档遵守我们给它的CSS规则有三种方式可以实现而目前我们更倾向于利用最普通且有用的方式——在文档的开头链接CSS。在HTML文档的相同目录创建一个文件保存并命名为styles.css(随便命名)。为了把styles.css和HTML文档连接起来在HTML文档的head语句模块里面加上如下代码linkrefstylesheethrefstyles.css/link语句块里面我们用属性rel让浏览器知道有CSS文档存在并利用属性href指定寻找CSS文件的位置。可以在styles.css添加如下CSS样式观察结果。h1{color:red;}2. 样式化HTML元素我们通过元素选择器实现选中HTML元素。例如要样式话一个文档中所有的段落只需使用选择器p。若要将所有段落变为绿色可以利用如下的CSS样式。p{color:green;}用逗号将不同选择器隔开即可一次使用多个选择器。例如若要将所有段落与列表变成绿色只需p, li{color:green;}3. 改变元素的默认行为只要一个HTML文档标记正确浏览器都会尽全力将其渲染至可读状态。标题默认使用大号粗体列表旁总有项目符号。这是因为浏览器自带一个包含默认样式的样式表默认对任何页面有效。对浏览器的默认样式不太满意。没关系只需选定那个元素加一条CSS样式。以ul无序列表为例它自带项目符号你不想要项目符号可以这样移除它们。li{list-style-type:none;}4. 使用类名我们通过HTML元素名规定样式。如果你愿意所有元素都一个样也不是不可以但大多数情况下不希望这样。可以给HTML元素加个类名class再选中这个类名即可单独样式化这个元素。给无序列表的第二个对象增加一个class属性。ulli项目一/liliclassspecial项目二/lili项目em三/em/li/ul在CSS中要选中这个special类只需在选择器的开头加个英文句号。.special{color:orange;font-weight:bold;}有时你会发现选择器中HTML元素选择器跟类一起出现li.special{color:orange;font-weight:bold;}这样只会选中每个special类的li元素。如果还想选中每个special类的span元素li.special, span.special{color:orange;font-weight:bold;}5. 根据元素在文档中的位置确定样式有时候你希望某些内容根据它在文档中的位置而有所不同。这里有很多选择器可以为你提供帮助但现在我们只介绍几个选择器。在示例的文档中有两个em元素——一个在段落内另一个在列表项内。仅选择嵌套在li元素内的em元素我们可以使用一个称为包含选择符的选择器它只是单纯地在两个选择器之间加上一个空格。li em{color:rebeccapurple;}该选择器选择li内部的任何em元素。另一个可能想尝试的事情是在HTML文档中设置出现在标题后面并且与标题具有相同层级的段落样式为此需在两个选择器之间添加一个号(相邻选择符)。h1 p{font-size:200%;}6. 根据状态确定样式当我们修改链接的样式时。当我们修改一个链接的样式时我们需要定位a标签。取决于是否是未访问、访问过的、被鼠标悬停、被键盘定位的亦或是正在被点击当中的状态这个标签有这不同的状态。你可以使用CSS去定位或者说针对这些不同的状态进行修饰。下面的CSS代码使得没有被访问的链接颜色变为粉色、访问过的链接变为绿色。a:link{color:pink;}a:visited{color:green;}可以改变链接被鼠标悬停的时候的样式移出下划线。a:hover{text-decoration:none;}7. 同时使用选择器和选择符/* 选择任何在p中的span同时该p必须要在article中 */article p span{}/* 选择任何紧跟在ul之后的p同时该ul紧跟在h1之后 */h1 ul p{}可以将多种类型组合在一起。/* 在body内紧跟在h1之后的p内的类名为special的元素 body h1 p .special{color:yellow;background-color:black;padding:5px}!doctypehtmlhtmllangzh-CNheadmetacharsetutf-8/title开始学习 CSS/titlelinkrelstylesheethreflearning.css//headbodyh1我是一级标题/h1p这是一个段落文本。在文本中有一个spanclassspecialspan element/span并且还有一个ahrefhttp://example.com链接/a./pp这是第二段。包含了一个em强调/em元素。/pulli项目一/liliclassspecial项目二/lili项目em三/em/li/ul/body/html参考1 让我们开始CSS的学习之旅