CSS语法

最新推荐文章于 2024-10-02 15:35:50 发布

敖月

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量269

点赞数 4

文章标签： css 前端

本文链接：https://blog.csdn.net/Cloul/article/details/139271774

版权

CSS定义

层叠样式表

（Cascading Style Sheets）的缩写，是一种样式表语言，用来描述HTML文档的呈现（美化内容）

书写位置：title标签下方添加style双标签，style标签里书写CSS代码。

CSS语法格式

选择器{

属性名：属性值；

......

}

CSS引入方式及部分选择器（见代码）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法</title>
    <!-- CSS书写位置：title标签下方添加style双标签，style标签里书写CSS代码-->
   <!-- 内部样式表 -->
    <style>
        /* 选择器{ CSS属性：属性值 } */
        /* 属性名和属性值成对出现->键值对 */
        /* 标签选择器：使用标签名作为选择器->选中同名标签设置相同样式，无法差异化同名标签样式 eg:p,h1,div,a,img... */
        p {
            color: green; /* 文字颜色 */
            font-size: 25px; /* 字号  px:像素*/
        }
        /* 类选择器：查找标签，差异化设置标签显示样式 */
        /* 定义类选择器-> .类名; 使用类选择器->标签添加 class="类名"*/
        .yellow{
            color: yellow;
        }
        .size{
            font-size: 50px;
        }
        /* id选择器：查找标签，差异化设置标签的显示效果(一般配合javaScript使用，很少用来设置css属性) */
        /* 定义id择器-> #id名; 使用id选择器->标签添加 id="id名" */
        /* 同一个id选择器在一个页面只能使用一次 */
        #pink{
            color: pink;
        }
        /* 通配符(全局)选择器；查找页面所以标签，设置相同样式 */
        /* *，不需要调用，，浏览器自动查找页面所有标签，设置相同的样式 一般开发初期清除标签默认样式的时候使用*/
        *{
            text-align: center; /* 居中对齐 */
        }
        /* 后代选择器 */
        /* 后代选择器用空格隔开选择器的名称，表示“...内的...” */
        p strong {
            color: purple;
        }
        /* 相邻兄弟选择器用+号连接两个兄弟元素，表示为某元素后紧邻的兄弟元素设置样式 */
        h2+p {
            font-weight: bold; /* 粗体显示 */
            color: bisque;
        }
    <!-- link引入外部样式表 rel:关系->样式表 href:css代码路径 -->
    <link rel="stylesheet" href="./外部.css">
</head>
<body>
    <h1>内部样式</h1>
    <p>外部样式</p>
    <p>111111</p>
    <!-- 行内样式表，style="css:属性" -->
    <div style="color: blue; font-size: 20;"> 行内样式 </div>
    <!-- 使用类选择器->标签添加 class="类名" -->
    <!-- 一个类选择器可以给多个标签使用 -->
    <!-- 一个标签只能添加一个class，但class属性值可写多个类名，类名用空格隔开 -->
    <p class="yellow size" >类选择器</p>
    <!-- 使用id选择器->标签添加 id="id名" -->
    <!-- 同一个id选择器在一个页面只能使用一次 -->
    <div id="pink">id选择器</div>
    <!-- 后代选择器 -->
    <p>这是<strong>后代选择器</strong></p>
    <!-- 相邻兄弟选择器 -->
    <h2>下面是</h2>
    <p>相邻兄弟选择器</p>
</body>
</html>