Css基础语法

最新推荐文章于 2024-11-01 12:26:05 发布

倾尽.

最新推荐文章于 2024-11-01 12:26:05 发布

阅读量77

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_67522335/article/details/132068389

版权

CSS基础语法-1

CSS基本概念

CSS基本概念

html和css结构样式分离，写法上html 属性和属性值用=拼接，css属性和属性值

css层叠样式表

CSS（层叠样式表）是一种用来控制网页样式和布局的语言。以下是一些基础的 CSS 语法：

选择器：用来选择要应用样式的 HTML 元素。例如，要将所有段落文本的颜色设置为红色，可以使用以下选择器：p { color: red; }
声明：用来定义样式属性和值。例如，color: red; 中，color 是属性，red 是值。
属性值：属性的具体取值。例如，color: red; 中，red 是属性 color 的属性值。
注释：用于在 CSS 中添加注释。可以使用 /* 开头和 */ 结尾来包含注释内容。例如：/* 这是注释 */

下面是一个基础的 CSS 例子：

/* 这是注释 */
p {
  color: red;
  font-size: 16px;
  font-family: Arial, sans-serif;
}

这个例子中，我们选择了所有的段落元素，并定义了颜色、字体大小和字体系列。

写法一

 <font color="red" size="7" face="宋体" style="background-image: url(/QianDuan/浩哥.png)";>文字标签</font>

写法二

    font{
            color: red;
            font-family: "宋体";
        }

写法三

<link rel="stylesheet" href="./class1.css

选择器

选择器是CSS中用于选择HTML或XML文档中的元素的关键字或模式。它们用于指定元素的样式规则，从而影响文档的外观和格式。简单来说，选择器是一种语法，它允许我们根据元素的属性、标签名、类名、ID等来定位元素，并给这些元素应用相应的CSS样式。通过使用选择器，可以使网页的样式更加统一和美观，也可以帮助改善文档结构的可读性和可维护性。常用的选择器有：标签选择器、类选择器、ID选择器、伪类选择器、伪元素选择器等。

html的样式表

<body>
    <b>大数据</b>
    <a href="#">大数据牛逼</a>
    <ul>
        <li>1
            <ul>
                <li>22222222222222</li>
            </ul>
        </li>
        <li id="q">1</li>
        <li>1</li>
        <li class="q">1</li>
        <li>1</li>
        <li class="q">1</li>
        <li>1</li>
        <li class="q">1</li>
        <li>1</li>
        <li class="q">1</li>
        <li>1</li>
        <a href="">博彩系统</a>
        <p>tttttttttttttt</p>
    </ul>
    <a href="">大数据111</a>
    <a href="">大数据222</a>
</body>

css界面

    <style>
 /* 1、 全局选择器都没回 */
        *{
            margin: 0;
            padding: 0;
        }

        /* 3\class 选择器   。 */
        .q{background-color: aqua;}
        /* 4、id  #  独一无二*/
    #q{background-color: yellow;}

    /* 5、群组选择器  ， */
    b,a{
        background-color: red;
      }

    /* 6、层次选择器 */
    /* 子代选择器  > */ 
     ul>li{color: red;}

    /* 后代选择器  空格 */
    /* 去除无序列表的点 */
    .uu li{list-style: none;}

    /* 相邻兄弟  + */
    .uu+a{background-color: blue;}
    /* 通用兄弟  ~ */
    .uu>li~a~p{background-color: chartreuse;}


    /* 7、伪类选择器 */
    /* ui 伪类  a标签使用 */
    /* 默认状态 */
    b+a:link {
      background-color: yellowgreen;
    }

    /* 、访问过后的状态 */
    b+a:visited {
      background-color: aqua;
    }

    /* 鼠标悬浮 */
    b+a:hover {
      background-color: red;
    }

    /* 鼠标按下 */
    b+a:active {
      background-color: orange;
    }

    /*结构伪类  */
    ul li:nth-child(3) {
      background-color: orangered;
    }

    a:nth-child(4) {
      background-color: gold;
    }

    ul p:nth-child(18) {
      background-color: antiquewhite;
    }
    </style>