CSS文本-字体-选择器-伪类

Hhan_
267 阅读9分钟

CSS文本属性

text-decoration（常用）

text-decoration：用于设置文字的装饰线；有常见的如下取值：

  • none：无任何装饰线，可以用来去除a元素默认的下划线
  • underline：下划线；
  • overline：上划线；
  • line-through：中划线（删除线）

a元素有下划线的原因：本质就是添加了text-decoration属性。

text-transform（一般）

text-transform：用于设置文字的大小写转换；

text-transform有几个常见的取值：

  • capitalize：每个单词的首字符大写；
  • uppercase：每个单词都是大写
  • lowercase：每个单词都是小写
  • none：不变，没影响；

实际开发中，JavaScript转换使用的更多，通过css改变单词大小写用的较少；

text-indent（一般）

text-indent：用于设置第一行内容的缩进；

如果我们傻傻的写：text-indent：10px，那么换成移动端的时候就会存在出入，在开发中我们更常用的调试技巧是通过em;

我们的缩进应该是缩进2个文字的大小，如果一个文字的大小（font-size：30px），那么text-indent就需要是：60px；

em：是相对于字体的大小；

text-indent：2em：刚好是缩进2个文字；

text-align（重要）

text-align：定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。

常用值：

  • left：左对齐
  • right：右对齐
  • center：居中显示
  • justify：两端对齐
.box{
    text-align:center;
}
.content{
    
}

<div class = "box">
    <div class = "content"></div>
</div>

在父级中书写text-align，让子级行内元素居中

letter-spacing、word-spacing（一般）

letter-spacing、word-spacing分别用于设置字母、单词之间的间距；

默认是0，也可以设置为负数；

CSS字体属性

font-size（重要）

font-size：决定文字的大小；

常用的设置：

  • 具体数值+单位
    • 比如100px
    • 也可以使用em单位（不推荐）：1em代表100%，2em代表200%，0.5em代表50%
  • 百分比
    • 基于父元素的font-size计算，比如50%就表示等于父元素的font-size大小的一半；

font-family（重要，不过一般就设置一次）

font-family用于设置文字的字体名称；

  • 可以设置1个或多个字体名称（防止某些字体用不了，因为有的电脑没下载这个字体就会不支持）；
  • 浏览器会选择列表中第一个该计算机上有安装的字体；
  • 或者是通过@font-face指定的可以直接下载的字体；

font-weight（重要）

font-weight：用于设置文字的粗细（中粮）

常见的取值：

  • 100|200|300|...|900：每一个数字代表一个重量；
  • normal（正常）：等于400
  • bold（加粗）：等于700

strong、b、h1~h6这些标签的font-weight默认就是bold

font-style（一般）

font-style用于设置文字的常规、斜体；

  • normal：常规显示；
  • italic（斜体）：用字体的斜体显示（除了倾斜还会有专门的字体）；
  • oblique（倾斜）：文本倾斜显示（仅仅是让文字倾斜）

em、i、cite、address、var、dfn等元素的font-style默认就是italic

image.png

line-height（常用）

line-height：用于设置文本的行高，行高可以理解为【一行文字】所占据的高度

image.png

行高的严格定义是：两行文字基线之间的间距；

基线：与小写字母x最底部对齐的线；

image.png

英语中，文字书写不超过顶线与底线，中线是取中值，而基线是基于底线稍微上一点的线。

设置line-height：30px；就意味着2行的基线差额为30px；

image.png

设置基线的高度，通过数学转换，也意味着等同于这行文本的高度；即：基线高度 = 该行的文本高度

文本的高度和字体大小（font-size）有关，如果行高line-height：40px；font-size：24px；，还会剩下16px的距离，16px就是行距，这个行距就会/2放在顶线和底线的上下面。此时就会做到居中的效果；

注意区分height和line-height的区别：

  • height：是元素整体的高度；
  • line-height：元素中，每一行文字所占据的高度；

假设div中只有一行文字，如果让这行文字在div内部垂直居中？

答：让line-height等同于height，意味着行高-文本字体大小，平均分出多余行高，文字就会显得垂直居中；

行高只可以让【文本居中】！

font

font是一个缩写属性，可以用来作为font-style,font-variant,font-weight,font-size,line-height和font-family属性的简写；

font-style,font-variant,font-weight(前面这些都可以省略),font-size/line-height,font-family

规则：font-style,font-variant,font-weight可以随意调换顺序，也要可以省略；

/line-height也可以省略，如果不省略，必须跟在font-size后面；

font-size,font-family不可以调换顺序，不可以省略；

.box{
    //关于字体的属性：
    font-size:30px;
    font-weight:700;
    font-variant:small-caps;
    font-style:italic;
    font-family:serif;
    line-height:30px;
    
    //缩写属性：
    font:italic 700 30px/30px serif;
}

CSS常见选择器

选择器再复杂，也是为了按照一定规则，来选中某个元素，然后添加CSS样式。

通用选择器

通用选择器：所有的元素都会被选中；

一般用来给所有元素作一些通用性的设置：使用*{}

  • 比如内边距、外边距；
  • 比如重置一些内容；
//匹配所有元素，设置字体大小
*{
    font-size:30px;
}

<div>
    <p></p>
</div>

效率比较低，尽量不要使用

元素选择器

使用元素的名称

image.png

3个div都会生效

类选择器

使用.类名

image.png

id选择器

使用#id

image.png

注意事项：

  • 一个HTML文档中的id值是唯一的，不能重复；
  • 可以给很多元素加上同一个class选择器，但是只能给一个元素加上id选择器；
    • id如果由多个单词组成，使用中划线-，下划线_，也可以使用驼峰命名；
    • 最好不要用标签名作为id值

属性选择器

image.png

image.png

后代选择器

<div class = "box">
    <div>
        <span>哈哈哈</span>
    </div>
</div>

<div class = "box">
    <span>呵呵呵</span>
</div>
  • 所有的后代（直接/间接的后代）
    • 选择器之间以空格分割
.box span{
   color:red; 
}

哈哈哈、呵呵呵都变成了红色

  • 直接自带选择器（必须是直接自带）
    • 选择器之间以>分割；
.box > span{
    color:red;
}

只有呵呵呵是红色的

兄弟选择器（了解）

<div class = "one">哈哈哈</div>
<div>呵呵呵</div>
<div>嘿嘿嘿</div>
<div>嘻嘻嘻</div>
  • 相邻的兄弟选择器
    • 使用符号+连接
.one + div{
    color:red；
}

只有离one类最近的那个div会变色，也就是呵呵呵；

  • 普遍兄弟选择器
    • 使用符号~连接
.one ~ div{
    color:red;
}

只要跟one类同级的div都会变色，也就是呵呵呵、嘿嘿嘿、嘻嘻嘻都会变色；

选择器组-交集选择器

交集选择器：需要同时符合两个选择器条件（两个条件选择器紧密连接）

  • 在开发中通常为了精准的选择某一个元素

只给div标签，并且是one类进行样式添加：

<div class = "one">哈哈哈</div>
<div>呵呵呵</div>
<p class = "one">嘻嘻嘻</p>

不能有空格，有空格就是div下的子类为one的；紧挨着就表示要同时满足

div.one{
    color:red;
}

选择器组-并集选择器

并集选择器：符合一个选择器即可（两个选择器以,号分割）

  • 在开发中通常为了给多个元素设置相同的样式；

one类或者two类，都可以添加样式

<div class = "one">哈哈哈</div>
<p class = "twp">呵呵呵</p>

.one,.two{
    color:blue;
    font-size:20px;
}

伪类

伪类是选择器的一种，它用于选择处于特定状态的元素；

比如我们经常会实现的：当鼠标放在一个元素上时，显示另外一个颜色；因为放在一个元素上，处于一个特定的状态；

image.png

2、3用的很少，4常用于input元素

动态伪类

使用举例：a元素

  • a:link：未访问的链接（只能用于a元素）；
  • a:visited：已访问的链接（只能用于a元素）；
  • a:hover：鼠标挪动到连接上（重要）；
  • a:active：激活的链接（鼠标在连接上长按，未松开）；
// 1. a元素的链接从来没被访问过：
a:link{
    color:red;
}

// 2. a元素被访问过了颜色：
a:visited{
    color:green;
}

// 3. a元素鼠标放在（悬浮）上面：
a:hover{
    color:blue;
}

// 4. 点下去，还没有松手的状态
a:active{
    color:purple;
}

使用注意：

  • :hover：必须放在:link和:visited后面才能完全生效；
  • :active：必须放在:hover后面才能完全生效
  • 所以编写的顺序是：:link、:visited、:hover、:active；

除了a元素，:hover、:active也能用在其他元素上

focus

:focus指：当前拥有输入焦点的元素（能接受键盘的输入）

  • 文本输入框一旦聚焦后，背景就会变成红色；
  • 因为链接a元素可以被键盘的Tab键选中聚焦，所以:focus也适用于a元素；
a:focus{
    color:yellow
}

动态伪类建议编写顺序为：
:link、:visited、:focus、:hover、:active；

直接给a元素设置样式，相当于给a元素所有的动态伪类都设置了

伪元素

常见的伪元素有：是一个意思，只不过2种写法。

  • :first-line、::first-line
  • :first-letter、::first-letter
  • :before、::before
  • :after、::after

为了区分【伪元素】和【伪类】，建议【伪元素】使用2个冒号，比如：::first-line

伪元素::first-line和::first-letter

  • ::first-line可以针对【首行文本设置属性】。
  • ::first-letter可以针对【首字母设置属性】

image.png

首先要是p标签，并且选中首行/首字母

伪元素::before和::after（常用）

::before和::after用来在一个元素的【内容之前】或者【内容之后】插入其他内容（可以是文字、图片）。

经常通过content属性，来为一个元素添加修饰性的内容；

.box3::after{
    content:'cba',
    color:orange
}

<div class = "box3">
    我是box3
</div>

输出：我是box3cba(cba是橘色)

但是这种只能让box3来添加，功能不够通用；

为了增加可通用性，我们经常：如果想要添加相同样式的，再添加一个item类即可；

.item::before{
    content:'123'
}
.item::after{
    content:'321',
    content:url('内部图片');
}

<div class = "box3 item"></div>
<div class = "box4 item"></div>
<div class = "box5 item"></div>
avatar
文章
阅读
粉丝