04-CSS选择器及文本样式

孙小明的测试修炼手册

已于 2023-06-24 14:34:57 修改

阅读量565

点赞数

分类专栏：前端实战-HTML&CSS 文章标签： css html css3

于 2023-06-23 19:08:30 首次发布

本文链接：https://blog.csdn.net/weixin_44431329/article/details/131353366

版权

前端实战-HTML&CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、CSS的作用

CSS的中文名称为层叠样式表，CSS的作用主要是给页面中的HTML标签设置样式，主要的语法规则为选中标签设置样式

2、CSS的引入方式

说明

引入方式	说明	作用	使用范围
内嵌式	css写在style标签中	当前页面	小案例
外联式	css写在单独的.css文件中，在通过link引用	多个页面	项目中
行内式	css标签写在标签的style属性中	当前标签	配合js使用

1、内嵌式

一般写在head标签中

2、外联式

外联式通过href进行引用外部css样式

3、行内式

css样式写在style标签属性中

3、选择器

说明

选择器	说明	作用	用法
标签选择器	通过页面标签来选择	能过选择同一类型标签，然后进行设置样式	标签名
类选择器	使用标签中clss属性选择，类名相当于姓名可以重复，可以多个	根据标签clss属性进行选择并设置样式	.clss名
id选择器	使用标签中id属性查找，不可以重复，一个标签名只有一个id属性，，一般来配合js	根据标签中的id属性进行选择并设置样式	#id名
通配符选择器	选择页面所有标签	对页面所有标签都生效	*

1、标签选择器

问题：使用标签选择器给html页面中div标签设置宽高度为100px，背景颜色为红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

展示

2、类选择器

问题：使用标签选择器给html页面中div标签设置宽高度为100px，背景颜色为红色
注意点：使用类选择器类名需要加点进行使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

展示

3、id选择器

问题：使用标签选择器给html页面中div标签设置宽高度为100px，背景颜色为红色
注意点：使用id选择器 id名需要加#进行使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

展示

4、通配符选择器

问题：使用标签选择器给html设置为背景颜色为红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {

            background-color: red;
        }
    </style>
</head>
<body>
</body>
</html>

展示

4、文字和文本样式

1、字体样式

字体样式	说明	使用场景
font-size：字体大小	设置文字的大小，谷歌默认字体为16px	设置文字大小
font-weight：字体粗细	设置字体粗细 1. 关键字 1. 正常：normal 2. 加粗：bold 2. 数字 1. 正常：400 2. 加粗：700	在开发的场景中使用正常加粗较多
font-style：字体样式	取值 1. 正常：normal 2. 倾斜：italic
font-family：字体类型	取值：这是字体样式常见的有微软雅黑，苹方	补充字体黑体宋体楷体，
font：字体连写	font : style weight size family	可以进行字体的连写

注意：如果给一个相同的标签设置了相同属性，此时样式会进行层叠，写在最下面的会生效

2、文本样式

文本样式	说明	使用场景
text-indent：缩进	取值： 1. 数字+px 2. 数字+em(1em相当于font-size的大小)	段落缩进文本缩进
text-align：对齐方式	取值： 1. 左对齐:left 2. 右对齐:right 3. 居中对齐center
能让那些标签可以进行水平居中 1. 文本 2. span标签 3. a标签 4. input标签 5. img标签	如果要让文本水平居中，text-align属性给文本所在标签的父属性进行设置
text-decoration：文本装饰	取值： underline 下划线（常用） line-through 删除线(不常用) none 无装饰线（常用）	none 属性一般用来给a标签去除下划线来进行使用
line-height：文本行高	取值： 1. 数字+px 2. 倍数(当前标签font-size的倍数)	1. 让单行文本垂直居中，可以设置line-height:文字父元素高度 2. 网页精准布局时，会设置line-height:1可以取消上下间距
color:文字颜色	取值 1. 颜色英文 2. rgb	用来设置文本颜色

5、练习题

1、请你创建一个HTML文档，并在其中添加一个标题和一段文字。你需要使用CSS来实现以下效果：

标题的字体为Georgia, serif；
标题文字颜色为棕色；
标题文字下方有一个下划线；
段落文字的字体为Arial, sans-serif；
段落文字颜色为深灰色（#333）；
段落文字字号为16像素；
段落文字行高为1.5倍；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            font-family: Georgia, serif;
            color: tomato;
            text-decoration: underline;
        }
        p{
            font-family: Arial, sans-serif;
            color: #333;
            font-size: 16px;
            line-height: 1.5;

        }

    </style>
 
</head>
<body>
    <!-- 
        1. 设置标题字体用font-family:Georgia, serif
        2. 设置文字颜色 color:棕色
        3. 设置文字下划线 text-decoration:underline
        4. 设置文字的字体font-family:Arial, sans-serif
        5. 段落的颜色为深灰色 color:#333
     -->
    <h1>标题1</h1>
    <p>遇见便是上上签</p>
</body>
</html>