CSS基础1——选择器&字体和文本样式

moneyhu545

已于 2024-05-01 11:38:58 修改

阅读量819

点赞数 22

文章标签： css html 前端

于 2024-04-28 20:02:49 首次发布

本文链接：https://blog.csdn.net/moneyhu/article/details/138256781

版权

本文详细介绍了CSS中标签选择器、类选择器、ID选择器、通配符选择器、复合选择器、并集选择器、交集选择器以及hover伪类选择器的用法，同时还涵盖了字体样式（如字体大小、粗细、样式和字体系列）和文本样式（如文本缩进、对齐、修饰线和行高）的设置。此外，还提到了HTML元素水平居中和Emmet快捷语法的应用。

摘要由CSDN通过智能技术生成

本节笔记整理了CSS中标签、类、id、通配符、复合、并集、交集、伪类选择器的使用方法，并针对字体和文本常见样式属性做了归纳。
视频参考链接：前端开发入门教程，web前端零基础html5 +css3+前端项目视频教程

选择器

标签选择器

结构：标签名{css属性名：属性值；}
作用：通过标签名，找到页面中所有这类标签，设置样式
注意：
- 标签选择器选择的是一类标签，而不是单独某一个
- 标签选择器无论嵌套关系有多深，都能找到对应的标签

类选择器

结构：.类名{css属性名：属性值；}（定义类选择器）
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点：
- 所有标签上都有class属性，class属性的属性值称为类名(类似于名字)
- 类名可以由数字、字母、下划线、中划线组成，但不能以数字或中划线开头
- 一个标签可以同时有多个类名，类名之间以空格隔开
- 类名可以重复，一个类选择器可以同时选中多个标签

代码表示

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            color: red;
        }
        .size{
            font-size: 66px;
        }
    </style>
</head>


<body>
    <h1>111</h1>
     <!-- 一个标签需要使用多个类名，用空格隔开即可 -->
    <h1 class="red size">222</h1>
</body>

id选择器

(开发中常配合js使用)

结构：#id属性值{css属性名：属性值；}
作用：通过id属性值，找到页面中带有id属性值的标签，设置样式
注意点
- 所有标签上都有id属性
- id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
- 一个标签上只能有一个id属性值
- 一个id选择器只能选中一个标签

代码表示

<style>   
    #blue{
        color: blue;
    }
</style>
<body>
    <div id="blue">这是一个div</div>
</body>

通配符选择器

结构：*{css属性名：属性值；}。可以选中所有标签(只要没有被指定id和class的都被通配符选择器设置样式)
作用：找到页面中所有的标签，设置样式。清除所有标签的默认样式
注意点：开发中使用极少，只会在极特殊的情况下才用到(如上，为了清除标签固有的内外边界样式)

复合选择器

后代选择器：空格

儿孙级别的标签
选择器语法(选择器之间用空格隔开)：选择器1(父级) 选择器2(儿孙){css}

代码表示：(作用：不想定义类名或者id名的时候用)

<style>
    /* 为div的儿子p标签赋上颜色 */
    div p{
        color: red;
    }
</style>

<body>
    <p>这是一个p标签</p>
    <div>
        <p>这是div的儿子p标签</p>
    </div>
</body>

子代选择器

选择器语法：选择器1>选择器2{css}
在选择器1所找到标签的子代(儿子)中，找到满足选择器2的标签，设置样式

代码表示

<style>
    /* 只想要div的儿子a标签变红 */
    div>a{
        color: red;
    }
</style>

<body>
    <p>这是一个p标签</p>
    <div>
        <a href="">div的儿子a标签</a>
        <p><a href="">div的儿子p的儿子a标签</a></p>
    </div>
</body>

并集选择器

作用：同时选择多组标签，设置相同的样式
选择器语法：选择器1，选择器2{css}
代码表示

交集选择器

作用：选中页面中同时满足多个选择器的标签
选择器语法(选择器之间是紧挨着的)：选择器1选择器2{css}
注意：交集选择器中如果有标签选择器，则标签选择器必须写在最前面
代码表示

hover伪类选择器

任何标签都可以添加伪类

作用：选中鼠标悬停在元素上的状态，设置样式(如：将鼠标悬停在某个区域，该区域会变黑)
选择器语法：选择器:hover{css}
伪类选择器选中的元素的某种状态

代码表示

a:hover{
    color: green;
    background-color: aqua;
}

字体样式

字体大小:font-size
- 取值：数字+px
- 注意点：
  - 浏览器默认文字大小是16px
  - 单位px需要设置，否则无效
字体粗细:font-weight
- 取值(两种取值方法)：
  - 关键字取值：normal(正常)、bold(加粗)
  - 数字取值：400(正常)，700(加粗)
- 注意
  - 不是所有字体都提供了九种粗细，因此部分取值页面中无变化
  - 实际开发中以：正常、加粗两种取值使用居多
字体样式:font-style
- 取值：
  - 正常：normal
  - 倾斜：italic
字体类型:font-family
- 常见取值
  - 具体字体：“Microsoft YaHei”; 微软雅黑(win系统默认)、黑体、宋体、楷体等
  - 字体系列：sans-serif、serif、monospace等
- 渲染规则：
  - 从左到右按顺序查找，若电脑中未安装该字体，则显示下一个字体
  - 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
- 注意点
  - 如果字体名称中存在多个单词，推荐使用引号包裹
  - 最后一项字体系列不需要引号包裹
  - 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

代码解释

<style>
    div{
        /* 如果没有安装楷体，则按微软雅黑显示，若没有安装微软雅黑，则按黑体显示，若没有安装黑体，则按照任意一种无衬线字体显示 */
        font-family: 楷体,微软雅黑,黑体,scans-serif;
        font-size: 30px;
    }
</style>

字体类型:font属性连写属性名：font
- 取值：font: style weight size family
- 省略要求：只能省略前两个，如果省略了相当于设置了默认值（可以只写字号和字体，即不能省略后面两个）
- 注意：如果需要同时设置单独和连写形式
  - 要么把单独的样式写在连写的下面
  - 要么把单独的样式写在连写的里面
  - 因为后面的样式会覆盖掉前面的样式
- 代码表示
```
p{
    /* 按照顺序：style weight size family */
    font:italic 700 60px 宋体;
    /* 把单独的样式写在连写的下面 */
    font-style: normal;
}
```

文本样式

文本缩进：text-indent
- 取值：
  - 数字＋px
  - 数字+em(推荐 1 em=当前标签的font-size的大小)
文本水平对齐方式：text-align
- 属性值效果
  left 左对齐
  center 居中对齐
  right 右对齐
- center可以让下面元素水平居中：文本、span标签、a标签、input标签、img标签
- 注意点：若需要让上面元素水平居中，text-align属性给以上标签元素的父元素设置
文本修饰：text-decoration
- 属性值效果
  underline 下划线(常用)
  line-through 删除线(不常用)
  overline 上划线(几乎不用)
  none 无装饰线(常用)
- 注意点：开发中会使用text-decoration: none;清除a标签默认的下划线
line-height行高：控制两行文字的间距

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

属性值	效果
underline	下划线(常用)
line-through	删除线(不常用)
overline	上划线(几乎不用)
none	无装饰线(常用)

在这里插入图片描述

取值：
- 数字+px
- 倍数(当前标签font-size的倍数)
应用
- 让单行文本垂直居中可以设置line-height：文字父元素高度
- 网页精准布局时，会设置line-height: 1，可以取消上下间距
行高与font连写的注意点
- 如果同时设置了行高和font连写，注意覆盖问题
- font: style weight size/line-height family；(注意字号和行高是用斜杠隔开的)

代码表示

p{
    text-indent: 2em;
    /* line-height: 60px; */
    line-height: 2.5;/*是字体字号的1.5倍*/
}

颜色常见取值

属性名：文字颜色：color；背景颜色：background_color

属性值

颜色表示方式	表示含义	属性值
关键词	预定义的颜色名	red green blue…
rgb表示法	红绿蓝三原色，每项取值范围0-255	rgb(0,0,255)
rgba表示法	红绿蓝三原色+a表示透明度，a取值范围是0-1	rgba(230,0,150,0.5)
十六进制表示法	#开头，将数字转换成十六进制表示(#开头，后面6位数（两两一组，若一组数字都相同，则简写为一位数）或三位数)	#000000 #ff0000 #e92322 简写：#000 #f00

标签水平居中方法总结margin: 0 auto

如果需要让div、p、h(大盒子)水平居中，可以通过margin: 0 auto;实现。其中：0表示上下间距，auto表示左右间距

补充

Emmet语法：通过简写语法，快速生成代码
- 如需让div、p、h(大盒子)水平居中，直接给当前元素本身设置即可
- margin: 0 auto 一般针对固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度
- 样式的层叠问题：给同一个标签设置了相同的属性（如设置了两个颜色），此时样式会层叠（覆盖），写在最后面的样式会生效