2021-10-3

2021/10/3 23:12:59

编程Tag： 选择器 text Font 10 color document 样式表 2021

本文主要是介绍2021-10-3，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Css选择器：

基础选择器：标签选择器类选择器 id选择器通配符选择器

标签选择器：

<!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: green; 
        }
        div {
            color: pink;
        }
    </style>
</head>
<body>
    <!-- 用标签做选择器 -->
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>
</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>
    <style>
        .blue {
            color: blue;
        }
        .brown {
            color: rgb(165, 42, 42);
        }
        .green {
            color: green;
        }
    </style>
</head>
<body>
    <!-- 样式点定义 结构class调用 一个或多个 开发最常用-->
    <!-- 单独选一个或者选某几个标签 -->
    <ul>
        <li class="blue">林</li>
        <li class="brown">王</li>
        <li class="green">刘</li>
        <li>张</li>
    </ul>
    <div class="green">我也想变绿色</div>
</body>
</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>
    <style>
        .red {
            color: red;
        }
        .font35 {
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div class="red font35">刘德华</div>
</body>
</html>

id选择器：和类选择器不同的是id选择器只能调用一次 id选择器可以多次调用

<!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>
        /* id口诀 样式#定义 结构id调用 只能调用一次  别人切勿使用 */
        #pink {
            color: pink;
        }
    </style>
</head>
<body>
    <!-- 只能调用一次 -->
    <!-- 只能调用一次 -->
    <!-- 只能调用一次 -->
    <div id="pink">迈克尔*杰克逊</div>
    <div >林文静</div>
</body>
</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>
    <!-- *把 HTML body div span li全部定义了 -->
    <style>
        * {
            color: blueviolet;
        }
    </style>
</head>
<body>
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>
</body>
</html>

总结：

CSS字体属性

字体：font-family: "微软雅黑"; = font-family: "Microsoft YaHei";

文字大小：font-size: 12px;

文字粗细：font-weight: normal;（默认正常字体） 400=normal bold=700加粗

文字风格：font-style: italic; italic斜体 normal 变正常

字体的符合属性：

    <style>
        div {
            font-style: italic;
            font-weight: 700;
            font-size: 16px;
            font-family: 微软雅黑;
        }
    </style>

要求的复合写法顺序：

font：font-style ; font-weight ; font-size/line-height; font-family;

font-style ;和font-weight可以没有但不能没有font-size/line-height; font-family;

font:italic 700 16px '微软雅黑';

总结

CSS文本样式：

文字颜色：color: yellow;(预定义颜色值) color: rgb(200,0 ,0)(十六进制) color: #cc00ff;(RGB)

对齐文本： text-align: center; center居中 right靠右 left靠左

装饰文本：text-decoration: underline; 下划线 line-through删除线 overline上划

常用情况：text-decoration: none;去除超链接的下划线

a {
            text-decoration: none; /* 去除超链接的下划线 */
        }

文本缩进：text-indent: 20px; 首行缩进20px text-indent: 2em; 缩进两个文字

文本行间距： line-height: 15px; 每行上下的距离

总结

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>
        div {
            color: pink;
        }
    </style>
</head>
<body>
    <div>所谓内部样式表,就是在HTML页面内部写样式,但是是单独写到style标签内部</div>
</body>
</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>

</head>
<body>
    <p class="red">青海长云暗雪山，</p>
    <p>孤城遥望玉门关。</p>
    <p>黄沙百战穿金甲，</p>
    <p>不破楼兰终不还！</p>
    <p style="color: pink;">给我一个粉红色的回忆</p><!-- 直接在p里加style -->
</body>
</html>

外部样式表：link

<!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="style.css">
</head>
<body>
    <div>开学推迟了  很难受啊  臭宝</div>
</body>
</html>

这篇关于2021-10-3的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

2021-10-3

Css选择器：

总结：

CSS字体属性

CSS文本样式：

总结

CSS引入方式：行内样式表 内部样式表 外部样式表

相关编程文章

CSS引入方式：行内样式表内部样式表外部样式表