2021-10-3

2021-10-03 23:01:56 阅读：138 来源： 互联网

标签：10 Document color text 2021 font 选择器样式表

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>

标签：10,Document,color,text,2021,font,选择器,样式表
来源： https://blog.csdn.net/weixin_46459597/article/details/120595899

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

2021-10-3

Css选择器：

总结：

CSS字体属性

CSS文本样式：

总结

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

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