CSS入门基础

最新推荐文章于 2024-07-21 20:52:32 发布

BANDGAP

最新推荐文章于 2024-07-21 20:52:32 发布

阅读量360

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/BANDGAP/article/details/82228093

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、基础语法规则
由两个主要部分构成：选择器，以及一条或多条声明
如下图所示

二、css高级语法
1、选择器的分组
被分组的选择器可以分享相同的声明
例：h1,h2,h3,h4,h5,h6{color:red;} 此时所有标题颜色都是红色的。
2、继承
例：

body{
    color:green
    }

此时，子元素诸如p,td,ul,ol,li,dl,dt,dd都显示绿色，子元素的子元素也是一样的。
三、基础选择器
1、派生选择器
通过依据元素在其位置的上下文关系来定义样式，可以使标记更简洁。
在css中定义一个派生器：li strong{color:red;}
在index.html中：

...
<p><strong>此处为黑色，因为不在列表中，该派生器无效</strong></p>
<li><strong>此处为红色，该派生器生效</strong></li>
...

2、id选择器
id选择器可以为标有id的HTML元素指定特定的样式，id选择器以”#”来定义，目前比较常用给的方式id选择器常常用于建立派生选择器。（相同的标签可以有特定的式样）
例：在index.html中：

<body>
    <p id="pid"><a>shiyanlou</a></p>
    <p id="p1id>test</p>
</body>

在mycss.css中：

#pid a{color:green;}//派生选择器
#p1id{color:red;}

此时，shiyanlou为绿色，test为红色。
3、类选择器
在css中，类选择器以一个.号显示。类名的第一个字符不能使用数字。也可用作派生选择器。
例：在index.html中

<body>
    <p class="pclass">it is a test<a>result</a></p>//派生选择器
    <div class="divclass">another test</div>

在mycss.css中

.pclass a{color:red}
.divclass{color:green}

此时，it is a test 为黑色，result为红色，another test为绿色。

上述3种选择器都要和.css文件进行连接，例：

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="mycss.css" type="text/css" rel="stylesheet">

4、属性选择器
对带有指定属性的HTML元素设置样式
例：在index.html中

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            [title]{
                color:#00ff14;
                }
            [title=te]{
                color:red;
                }
        </style>
    </head>
    <body>
        <p title=>属性选择器</p>
        <p title="te"]属性和值选择器</p>
    </body>
</html>