CSS选择器以及文本样式
CSS学习
CSS
层叠样式表（Cascading Style Sheets）
CSS可用来为网页创建样式表，通过样式表可以对网页进行装饰。
CSS语法
选择器 {样式名:样式值；样式名:样式值 ; }
例如：p{color:red;font-size:20px;}
行内样式
将样式写到标签内部的style属性中,例如：
<p style="color: red;font-size: 30px"></p>
但是，这样做的缺点是：导致结构与表现耦合，同时导致样式不能够复用，所以这种方式我们不使用。
内部样式表
可以将样式直接写到style标签中，例如：
<style>
p{color:red; font-size: 30px;}
</style>
好处：使CSS独立于HTML中，可以同时为多个标签设置样式
缺点：只能在一个页面中使用，不能在多个页面中使用
外部样式表
可以将所有的样式都保存到一个CSS文件中，在通过link标签将其引入到HTML中，例如：
<link rel="stylesheets" type="text/css" href="style.css">
将样式表放入到了页面的外部，可以在多个页面中引入，同时浏览器加载文件时可以使用缓存。
selector选择器
一、元素选择器
语法：
标签名{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<p>这是一个很完美的网页</p>
</body>
</html>
效果如下：
标签元素.PNG
二、类选择器
语法：
.className{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<style>
.div1{
font: 微软雅黑;
color: pink;
text-align: center;
font-size: 50px;
}
</style>
</head>
<body>
<div class="div1">真正的高度在于超越过去的自己</div>
</body>
</html>
效果如下：
类选择器.PNG
三、id选择器
根据元素的id属性值选取 元素。
语法：
id{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style>
#div1{
font: 微软雅黑;
font-size: 50px;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">真正的高度在于超越过去的自己</div>
</body>
</html>
显示效果如下：
id选择器.PNG
- id属性是不能重复的
四、复合选择器（交集选择器）
复合选择器，可以同时使用多个选择器， 这样可以选择同时满足多个选择器的元素。
语法：
选择器1选择器2{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复合选择器（交集选择器）</title>
<style>
span.p3{
background-color: yellow;
}
</style>
</head>
<body>
<p class="p3">床前明月光</p>
<span class="p3">疑是地上霜</span>
</body>
</html>
效果如下：
复合选择器.PNG
五、群组选择器（并集选择器）
群组选择器，可以同时使用多个选择器， 多个选择器将被同时应用指定的样式。
语法：
选择器1,选择器2,选择器3 { }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复合选择器</title>
<style>
h1,p{
font-size: 50px;
text-align: center;
}
</style>
</head>
<body>
<h1>真正的高度在于超越过去的自己</h1>
<p>我曾经跨过山和大海，也穿过人山人海，我曾经拥有着的一切，转眼间就飘散如烟。</p>
</body>
</html>
效果如下：
群组选择器.PNG
六、通用选择器
通用选择器，可以同时选中页面中的所有 元素。
语法：
*{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通用选择器</title>
<style>
*{
font-size:50px;
text-align: center;
}
</style>
</head>
<body>
<p>真正的高度在于超越过去的自己</p>
<p>我曾经跨过山和大海，也穿过人山人海，我曾经拥有着的一切，转眼间就飘散如烟。</p>
<p>床前明月光，疑是地上霜。举头望明月，低头思故乡。</p>
</body>
</html>
效果如下：
通用选择器.PNG
七、标签之间的关系
祖先元素
后代元素
父元素
子元素
兄弟元素
八、后代选择器
后代选择器可以根据标签的关系，为处在 元素内部的代元素设置样式。
语法：
祖先元素 后代元素 后代元素 { }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后代选择器</title>
<style>
#d1 span{
color: greenyellow;
}
</style>
</head>
<body>
<div id="d1">
<span>我是div标签中的span</span>
<p><span>我是p标签中的span</span></p>
</div>
</body>
</html>
效果如下：
后代选择器.PNG
九、伪类和伪元素
伪类
正常链接：
a:link
访问过的链接（只能定义字体颜色）
a:visited
鼠标滑过的链接
a:hover
正在点击的链接
a:active
十、其他元素
获取焦点
:focus
指定元素前
:before
指定元素后
:after
选中的元素
::selection
十一、其他选择器
首字母
:first-letter
首行
:first-line
十二、属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
/*
为所有具有title属性的p元素，设置一个背景颜色为黄色
属性选择器
作用：可以根据元素中的属性或属性值来选取指定元素
语法：
[属性名] 选取含有指定属性的元素
[属性名="属性值"] 选取含有指定属性值的元素
[属性名^="属性值"] 选取属性值以指定内容开头的元素
[属性名$="属性值"] 选取属性值以指定内容结尾的元素
[属性名*="属性值"] 选取属性值包含指定内容的元素
p[title]{
background-color: yellow;
}
*/
/*为title属性值是hello的元素设置一个背景颜色为黄色
p[title="hello"]{
background-color: yellow;
}
*/
/*为title属性值以ab开头的元素设置一个背景颜色为黄色
p[title^="ab"]{
background-color: yellow;
}
*/
/*为title属性值以c结尾的元素设置一个背景颜色
p[title$="c"]{
background-color: yellow;
}
*/
/*为title属性值包含c的元素设置一个背景颜色*/
p[title*="c"]{
background-color: yellow;
}
</style>
</head>
<body>
<!--
title属性，这个属性可以给任何标签指定
当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示
-->
<p title="hello">我是一个段落</p>
<p>我是一个段落</p>
<p title="abbc">我是一个段落</p>
<p title="abccd">我是一个段落</p>
<p title="abc">我是一个段落</p>
</body>
</html>
显示效果如下：
属性选择器.PNG
十三、子元素选择器
子元素选择器可以给另一个元素的子元素 设置样式。
语法：
父元素 > 子元素{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素选择器</title>
<style type="text/css">
/*
为第一个p标签设置一个背景颜色为黄色
:first-child 可以选中第一个子元素
:last-child 可以选中最后一个子元素
:nth-child 可以选中任意位置的子元素
该选择器后边可以指定一个参数，指定要选中第几个子元素
even 表示偶数位置的子元素
odd 表示奇数位置的子元素
body>p:first-child{
background-color: yellow;
}
p:last-child{
background-color: yellow;
}
p:nth-child(even){
background-color: yellow;
}
*/
/*
:first-of-type
:last-of-type
:nth-of-type
和child类似，只不过child是在所有的子元素中找
而type是在当前类型的子元素中找
p:first-of-type{
background-color: yellow;
}
*/
p:last-of-type{
background-color: yellow;
}
</style>
</head>
<body>
<span>我是span</span>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>我是span</span>
<!-- <div>
<p>我是一个p标签</p>
</div> -->
</body>
</html>
子元素选择器.PNG
其他子元素选择器
选择第一个子标签
:first-child
选择最后一个子标签
:last-child
选择指定位置的子元素
:nth-child
选择指定类型的子元素
:first-of-type
:last-of-type
:nth-of-type
十四、兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兄弟元素选择器</title>
<style type="text/css">
/*
为span后的一个p元素设置一个背景颜色为黄色
后一个兄弟元素选择器
作用：可以选中一个元素后紧挨着的指定的兄弟元素
语法：前一个 + 后一个
span + p{
background-color: yellow;
}
*/
/*
选中后边的所有兄弟元素
语法：前一个 ~ 后边所有
*/
span ~ p{
background-color: yellow;
}
</style>
</head>
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>我是一个span</span>
<div>我是div</div>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</body>
</html>
效果如下：
兄弟选择器.PNG
十五、否定伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>否定伪类</title>
<style type="text/css">
/*
为所有的p元素设置一个背景颜色为黄色，除了class值为hello的
否定伪类：
作用：可以从已选中的元素中剔除出某些元素
语法：
:not(选择器)
*/
p:not(.hello){
background-color: yellow;
}
</style>
</head>
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p class="hello">我是一个p标签</span>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</body>
</html>
否定伪类.PNG
十六、选择器的权重
不同的选择器有不同的权重值：
内联样式：权重是 1000
id选择器：权重是 100
类、属性、伪类选择器：权重是 10
元素选择器：权重是 1
通配符：权重是 0
计算权重需要将一个样式的全部选择器相加，比如上边的body h1的权重是20，h1的权重是10，所以第一个选择器设置的样 式会优先显示。
文本样式
1. em和strong
em标签用于表示一段内容中的着重点。
strong标签用于表示一个内容的重要性。
这两个标签可以单独使用，也可以一起使用。
<p>
<strong>警告：任何情况下不要接近僵尸。</strong>
他们只是 <em>看起来</em> 很友好，实际上他们是为了吃你的胳膊！
</p>
通常em显示为斜体，而strong显示为粗体。
2. i和b标签
i标签会使文字变成斜体
b标签会使文字变成粗体
3. small标签
small标签表示细则一类的旁注，通常包括 免责声明、注意事项、法律限制、版权信 息等。
浏览器在显示small标签时会显示一个比父 元素小的字号
<p><small>©2018北财. 保留所有权利.</small></p>
4.cite标签
使用cite标签可以指明对某内容的引用或参 考。例如，戏剧、文章或图书的标题，歌 曲、电影、照片或雕塑的名称等。
<p>
<cite>《七龙珠》</cite>讲的是召唤神龙的故事。
</p>
5. blockquote标签和q标签
blockquote和q表示标记引用的文本。
blockquote用于长引用，q用于短引用。
在两个标签中还可以使用cite属性来表示引 用的地址。
孟子曾经说过：
<blockquote>天将降大任于是人也...</blockquote>
他说的真对啊！
<p>孔子曾经说过：<q>学而时习之不亦说乎</q></p>
6. sup和sub
sup和sub用于定义上标和下标。
上标主要用于表示类似于103中的3。
下标则用于表示类似余H2O中的2。
7. ins和del
ins表示插入的内容，显示时通常会加上下 划线。
del表示删除的内容，显示时通常会加上删 除线。
8. code标签和pre标签
如果你的内容包含代码示例或文件名，就 可以使用code元素。
pre元素表示的是预格式化文本，可以使用
pre包住code来表示一段代码。
<pre>
<code>
function fun(){ alert("hello");
}
</code>
</pre>
9.有序列表
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
10. 无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
11. 定义列表
使用dl、dd、dt来创建一个定义列表
<dl>
<dt>定义项1</dt>
<dd>定义描述1</dd>
<dt>定义项2</dt>
<dd>定义描述2</dd>
<dt>定义项3</dt>
<dd>定义描述3</dd>
</dl>
12. 文字大小
font-size
13.文字字体
font-family
14. 字体分类
serif（衬线字体）
sans-serif（非衬线字体）
monospace （等宽字体）
cursive （草书字体）
fantasy （虚幻字体）
以上这些分类都是一些大的分类，并没有 涉及具体的类型，如果将字体指定为这些 格式，浏览器会自己选择指定类型的字体。
15. 斜体和粗体
font-style用来指定文本的斜体
指定斜体：font-style:italic
指定非斜体：font-style:normal
font-weight用来指定文本的粗体
指定粗体：font-weight:bold
指定非粗体：font-weight:normal
16. 小型大写字母
font-variant属性可以将字母类型设置为小 型大写。在该样式中，字母看起来像是稍 微缩小了尺寸的大写字母。
font-variant:small-caps
17. 字体属性的简写
font可以一次性同时设置多个字体的样式。
语法：
font:加粗 斜体 小型大写 大小/行高 字体
18. 行间距
line-height用于设置行高，行高越大则行 间距越大。
行间距 = line-height – font-size
19. 大写化
text-transform样式用于将元素中的字母全都变成大写。
大写：text-transform:uppercase
小写：text-tansform:lowercase
首字母大写：text-transform:capitalize
正常：text-transform:none
20. 文本修饰
text-decoration属性，用来给文本添加各 种修饰。通过它可以为文本的上方、下方 或者中间添加线条。
可选值：
underline
overline
line-through
none
21. 字母间距和单词间距
letter-spacing用来设置字符之间的间距。
word-spacing用来设置单词之间的间距。
这两个属性都可以直接指定一个长度或百 分数作为值。正数代表的是增加距离，而 负数代表减少距离。
22. 对齐文本
text-align用于设置文本的对齐方式。
可选值：
left：左对齐
right：右对齐
justify：两边对齐
center：居中对齐
23. 首行缩进
text-indent用来设置首行缩进。
该样式需要指定一个长度，并且只对第一 行生效。
text-indent:2em;首行缩进2个字符
网友评论