文章目录
系列文章目录前言一、css层叠样式表 1.css组成2.css引入方式3.文字样式4.文本属性二、选择器 1.基本选择器2.最高样式引入3.伪链接选择器4.伪结构选择器5.特定元素选择器6.目标伪类选择器7.复合选择器8.兄弟选择器9.后代选择器10.属性选择器11.伪元素选择器总结前言
CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等。而且还可以针对不同的浏览器设置不同的样式。
一、css层叠样式表
1.css组成
CSS主要有两个部分构成:选择器和声明(一条或多条)
css的书写:
选择器(变量名){
样式(键值对)
a:值
:值a
}
选择器用于指定css样式作用的HTML对象,花括号内是对该对象设置的具体样式。
属性和属性值之间以“键值对”的形式出现。
属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。
属性和属性值之间用英文“:”连接。
多个键值对之间使用英文“;”区分。
2.css引入方式
优先级:
1、行内样式表 > 内部样式表 = 外部样式表
2、当内部样式表和外部样式表同时存在时,采用就近原则来使用样式
1、行内样式引入(增加style属性)
<!--在标签内部再嵌套一个内嵌标签来设置样式--><span style="color: red;">行内样式表</span>
2、内联样式引入(style标签)
/*内部定义的style样式*/<style type="text/css">div {background-color: pink;}</style>
3、外联引入样式(文件引入,以link方式作为关联)
定义在外部的css文件中,需要在head中引入相应的css文件
/*关联外部的css样式文件*/<link type="text/css" rel="stylesheet" href="../css/test.css" />
type:定义链接文档的类型,在这里需要指定为"text/css",表示链接的外部文件为css样式表。
rel:定义当前文档与被链接文档之间的关系,在这里需要指定为"stylesheet",表示被链接的文档是一个样式表文件。
href:定义所链接外部样式表文件的url,可以是相对路径,也可以是绝对路径。
3.文字样式
font-size: 14px; 字号大小,浏览器不支持12px以下文字大小 ,1em=16px
font-family: Arial, Helvetica, sans-serif; 字体,多个属性用逗号隔开,依次匹配,多个单词用'' "
font-weight: lighter;字体粗细b,strong,以100作为倍数,或者字母400normal,700bold,boldter,lighter
font-style: italic; 字体风格i,em,属性值normal,italic,oblique
font: font-style font-weight font-size/line-height font-family; 综合设置,必须保留font-size、font-family属性,否则font属性将不起作用。
4.文本属性
1)文本颜色
color:red;
color-name;名称
hex-number十六进制颜色(常用)
rgba(opacity)(0,255,0-255,0-1)
hsla(0-360/100)
2)文本对齐方式
text-align: center;left;right;justify;(两端对齐)
justify; /*分散对齐,主要针对英文段落中出现空格时,由于两边对齐,空格的大小会有变化*/
一定要注意元素的性质是否为独占一行(非独占一行会失效)
3)文本装饰
text-decoration: none:/*默认*/
text-decoration: underline; /* 下划线 */
text-decoration: overline;/* 上划线*/
text-decoration: line-through blue; /* 删除线 */
4)文本转换
text-transform: none:默认
text-transform: capitalize:文本中每个单词以大写字母开头
text-transform: uppercase:所有单词字母都大写
text-transform: lowercase:所有单词字母都小写
5)文本间距
letter-spacing: -10px; /* 文字间距 */
word-spacing: 10px; /*字母间距 */
6)行高
width: 250px;
height: 250px;
background-color: red;
line-height: 220px;
/* 一行文字上下,使用单行文本,当值等于盒子的高度,就会达到垂直居中 */
7)文本方向
direction: ltr; /* ltr默认的从左到右,rtl从右到左 */
8)文本缩进
text-indent: 2em;文本首行缩进,首行缩进2字符
9)文本阴影
text-shadow: h-shadow v-shadow blur color;
h-shadow:必需。水平阴影的位置。允许负值。horizontal, X轴往右是正值
v-shadow:必需。垂直阴影的位置。允许负值。 vertical,Y轴向下是正值
blur:可选。模糊的距离。
color:可选。阴影的颜色。
二、选择器
1.基本选择器
行内样式选择器:style
id选择器:id
类选择器:class
元素选择器:当前页面所有特定元素
通配符选择器:* 作用:清除浏览器,默认样式,增加运行时间,减少重复的代码,会影响页面加载速度
权重对比:
行内样式选择器>id选择器>class选择器>元素选择器(tag选择器)>*通配符选择器
唯一性特点:class可以有多个,id不能有多个
css允许使用多个id或重复使用,但是在js阶段会报错
2.最高样式引入
!important 只要给定该元素,该元素的样式就会按照给定的css来,该元素应该整个页面的权重结构
3.伪链接选择器:
执行顺序:
a:link /*未访问的链接*/
a:visited /*已访问的链接*/
a:hover /*鼠标滑动到链接*/
a:active /*鼠标点击的链接*/
4.(位置)结构伪类选择器
:first-child获取第一个子元素
:last-child获取最后一个子元素。注意:IE8不支持X:last-child。
:nth-child(n)获取某个元素的第n个子元素。关键字(even偶数、odd奇数)。
:nth-last-child(n)获取某个元素的最后第n个子元素。关键字(even偶数、odd奇数)。
:first-of-type选择特定元素的第一个子元素
:last-of-type选择特定元素的最后一个子元素
:nth-of-type(n)只计算父元素中指定的某种类型的子元素
:nth-last-of-type(n)只计算父元素中指定的某种类型的子元素,从这个元素的最后一个元素开始获取
:nth-child先找到第n个孩子,然后匹配
:nth-of-type先去匹配,然后再找第n个孩子
5.特定元素选择器
:only-child
匹配没有任何兄弟元素的元素
:only-of-type 匹配同类型只有一个孩子的元素
:empty 元素里面没有任何的内容或子节点
:root 匹配文档的根节点
6.目标伪类选择器target
<style>/* 返回顶部 */p:target {color: blue;}</style>
<a href="#one">情人节</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><p id="one">跳转!</p>
7.复合选择器
1)交集选择器
由两个选择器构成,其中第一个为标签选择器,第二个为class选择器或者id选择器,两个选择器之间不能有空格。
p.one类名既是.one 且是段落标签
p#two.one id名,类名既是.one 且是段落标签
2)并集选择器
由各个选择器通过逗号连接而成的,任何形式的选择器,都可以作为并集选择器的一部分。
p,div 和
8.兄弟选择器
"+"以自己为出发点,跟它最接近的弟弟,只选择一个。
"~"选择除了它以外它所有的弟弟。
9.后代选择器
div>p子代
div p后代
10.属性选择器
11.伪元素选择器
::first-letter块级文本的第一个单词或字
::first-line文本的第一行
::selection滑动选择文本
::before {
content: "行内元素";
}
::after {
content: "行内元素";
}
ctrl+f 查找,替换
总结
以上就是今天要讲的内容,本文仅仅简单介绍了选择器的使用。