20220310_CSS学习01、Chrome调试工具

最新推荐文章于 2024-06-16 20:55:56 发布

苏轼嘟嘟改了名

最新推荐文章于 2024-06-16 20:55:56 发布

阅读量149

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_33316697/article/details/123402951

版权

一、CSS（层叠样式表）

1.CSS引入方式

（1）内嵌式：CSS写在style标签中

style标签虽然可以写在页面任意位置，但是通常约定写在head标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       p{
           /* 文字颜色变成红色 */
           color: red;
           /* 字变大 px:像素 */
           font-size: 30px;
           /* 背景颜色 */
           background-color:green;
           /* 宽度、高度 */
           width: 400px;
           height: 400px;
       }
    </style>
</head>
<body>
    <p>Hello world!</p>
</body>
</html>

（2）外链式：CSS写在一个单独的.css文件中

需要通过link标签在网页中引入，常在项目中使用

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 关系：样式表 -->
    <!-- 外链式引入方式 -->
    <link rel="stylesheet" href="./02CSS引入方式.css">
</head>
<body>
    <p>这是P标签</p>
</body>
</html>

css文件：

p{
    color: red;
}

（3）行内式：CSS写在标签的style属性中

配合JS使用

<div style="color: green;font-size: 30px;">这是div标签</div>

2.基础选择器

（1）标签选择器

结构：标签名{CSS属性名：属性值；}

作用：通过标签名，找到页面中所有这类标签，设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: red;
        }
    </style>
</head>
<body>
    <p>这是P1</p>
    <p>这是P2</p>
    <p>这是P3</p>
</body>
</html>

三句话同时变红，因为选择器会选择所有P标签。

（2）类选择器

结构：.类名{CSS属性名：属性值；}

作用：通过类名，找到页面所有带有这个类名的标签，设置样式

注意点：一个标签可以同时有多个类名，类名之间以空格隔开

类名可以重复，一个类选择器可以同时选中多个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            color: red;
        }
        .green{
            color: green;
        }
    </style>
</head>
<body>
    <p class="green">111</p>
    <p class="red">222</p>
    <div class="red size">333</div>
</body>
</html>

可针对标签选择器进行修改。

（3）id选择器

结构：#in属性值{CSS属性名：属性值；}

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注意点：（1）所有标签上都有id属性

（2）id属性值类似身份证号码，在一个页面中是唯一的，不可重复

（3）一个标签上只能有一个id属性值

（4）一个id选择器只能选中一个标签

配合JS使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #blue{
            color:skyblue;
        }
    </style>
</head>
<body>
    <div id="blue">111</div>
    <!-- id只能用一次，可以变蓝，但不符合规范 -->
    <!-- <p id="blue">222</p> -->  
</body>
</html>

（4）通配符选择器

结构：*{CSS属性名：属性值；}

作用：找到页面中所有的标签，设置样式

注意点：使用极少，可能用于去除标签默认的margin和padding。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            color: red;
        }
    </style>
</head>
<body>
    <div>111</div>
    <p>222</p>
    <h1>333</h1>
    <span>444</span>
</body>
</html>

3.字体和文本样式

（1）字体大小

属性名：font-size

取值：数字+px

谷歌浏览器默认文字大小是16px，单位需要设置，否则无效。

(2) 字体粗细

属性名：font-weight

取值：关键字：正常：normal

加粗：bold

纯数字：正常：400

加粗：700

(3) 字体倾斜

属性名：font-style

取值：正常：normal

倾斜：italic

（4）样式的层叠问题

如果给一个标签设置了相同的属性，此时样式会覆盖，写在最下面的会生效。

 p{
            color: red;
            color: blue;
        }

最终会显示蓝色属性。

（5）文本缩进

属性名：text-indent

取值：数字+px

数字+em（1em=当前标签font-size的大小）

首行缩进一般写2em

（6）文本水平对齐方式

属性名：text-align

取值：left-左对齐 center-居中对齐 right-右对齐

如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置。

text-align可以让文本、span标签、a标签、input标签、img标签居中。

若要使图片对齐，在css中不是对img进行修饰，而是body。

（7）文本修饰

属性名：text-decoration

取值：underline——下划线

line-through——删除线

overline——上划线

none——无装饰线

开发中会使用 text-decoration : none 清除a标签默认的下划线

（8）行高

作用：控制一行的上下行间距

属性名：line-height

取值：

数字+px
倍数（当前标签font-size的倍数）

（9）font复合属性：

取值：font : style weight size family;

只能省略前两个，如果省略了相当于设置了默认值

如果需要同时设置单独和连写形式，（1）把单独的样式写在连写的下面（2）把单独的样

式。

写在连写的里面。

(10) 字体

属性名：font-family

常见取值：具体字体1,具体字体2,具体字体3,具体字体4,...,字体系列

具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等……

字体系列：sans-serif、serif、monospace等……

渲染规则：

1. 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体

2. 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

常见字体系列：

网页中的字体一定是非衬线的。

（11）颜色常见取值

（12）标签居中

在标签中写 margin : 0 auto ;

二、chome调试工具

苏轼嘟嘟改了名

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
20220310_CSS学习01、Chrome调试工具

一、CSS（层叠样式表）1.CSS引入方式（1）内嵌式：CSS写在style标签中 style标签虽然可以写在页面任意位置，但是通常约定写在head标签中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &lt...
复制链接

扫一扫