Css基础2

首页 > 代码库 > Css基础2

2024-09-28 18:52:02 221人阅读

1.css选择符

　　选择符又称为选择器，定义了将影响文档中的哪些部分。

　　-1.元素选择符

　　　　通配符：*{}

　　　　　　下面的例子（test.css）匹配文档中所有的标签

*{
    background-color: blue;
}

　　　　　　一般情况下，我们会在html初始化的时候使用通配符，例子如下，将上和左边距都设为0

*{
     padding: 0;
     margin: 0;
 }

　　　　类选择敷：.类名称{}

　　　　　　下面的例子，将p标签的内容变为绿色

 1 index.html代码如下
 2 <!DOCTYPE html>
 3 <html>
 4 <head lang="en">
 5     <meta charset="UTF-8">
 6     <title></title>
 7     <link rel="stylesheet" href="http://www.mamicode.com/css.css" type="text/css"/>
 8 </head>
 9 <body>
10     <p class="hp">haha</p>
11     <span>hehe</span>
12 </body>
13 </html>
14 
15 css.css代码如下
16 *{
17      padding: 0;
18      margin: 0;
19  }
20 
21 .hp{
22     color:green;
23 }

　　　　id选择符：#id名称{}

　　　　　　下面的例子，将span标签内容变为紫色

index.html代码如下
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://www.mamicode.com/css.css" type="text/css"/>
</head>
<body>
    <p class="hp">haha</p>
    <span id="hs">hehe</span>
</body>
</html>

css.css代码如下
*{
     padding: 0;
     margin: 0;
 }

.hp{
    color:green;
}

#hs{
    color: purple;
}

　　　　类型选择符（标签选择符）：标签{}

　　　　　　下面的例子将li标签内容变为红色

index.html代码如下
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://www.mamicode.com/css.css" type="text/css"/>
</head>
<body>
    <p class="hp">haha</p>
    <span id="hs">hehe</span>
    <ul>
        <li>我是列表</li>
        <li>我是列表</li>
        <li>我是列表</li>
        <li>我是列表</li>
    </ul>
</body>
</html>


css.css代码如下
*{
     padding: 0;
     margin: 0;
 }

.hp{
    color:green;
}

#hs{
    color: purple;
}

li{
    color: red;
}

　　-2.关系选择符

　　　　- 子元素选择器：父亲>儿子

　　　　- 兄弟选择器：你自己~你的兄弟

　　　　　　1.本身不起作用

　　　　　　2.之前的元素不起作用

　　　　　　例子：下面的代码只有第二个和第三个h3标签会变色

inde.html代码如下
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://www.mamicode.com/css.css" type="text/css"/>
</head>
<body>
    <h3>这是一个标题</h3>
    <P>这是一个文字段落</P>
    <P>这是一个文字段落</P>
    <h3>这是一个标题</h3>
    <p>这是一个文字段落</p>
    <h3>这是一个标题</h3>
    <P>这是一个文字段落</P>
    <P>这是一个文字段落</P>
</body>
</html>

css.css代码如下
p~h3{
    color: brown;
}

　　　　- 相邻选择器：E+F

　　　　　　下面的例子中，第三行和最后一行变色

index.html代码如下
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://www.mamicode.com/css.css" type="text/css"/>
</head>
<body>
    <h3>这是一个标题</h3>
    <P>这是一个文字段落</P>
    <P>这是一个文字段落</P>
    <h3>这是一个标题</h3>
    <p>这是一个文字段落</p>
    <h3>这是一个标题</h3>
    <P>这是一个文字段落</P>
    <P>这是一个文字段落</P>
</body>
</html>

css.css代码如下
p+p{
    color: red;
}

　　　　- 包含选择器：EF

　　　　　　下面的例子，所有的ul，li标签内容全部变成红色

inde.html代码如下
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://www.mamicode.com/css.css" type="text/css"/>
</head>
<body>
    <ul>
        <li>列表项目</li>
        <li>
            <ul>
                <li>列表项目</li>
                <li>列表项目</li>
                <li>列表项目</li>
                <li>列表项目</li>
            </ul>
        </li>
        <li>列表项目</li>
        <li>列表项目</li>
    </ul>
</body>
</html>

css.css代码如下
ul li{
    color: red;
}

　　-3.属性选择符

　　　　1.属性

　　　　2.写法:

　　　　　　　　1)当前元素[属性]{}

　　　　　　　　　　例子：haha变色而hehe不变色

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        a[href]{
            color: red;
        }
        a[href=""]
    </style>
</head>
<body>
    <a href="http://www.mamicode.com/#">haha</a>
    <a>hehe</a>
</body>
</html>

　　　　　　　　2)当前元素[属性=“属性值”]{}

　　　　　　　　　　例子，第一个百度标签会变为红色

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        a[href="http://www.mamicode.com/www.baidu.com"]{
            color: red;
        }
    </style>
</head>
<body>
    <a href="http://www.mamicode.com/www.baidu.com">百度一下</a>
    <a href="http://www.mamicode.com/www.baidu1.com">百度一下</a>
    <a href="http://www.mamicode.com/www.baidu2.com">百度一下</a>
    <a href="http://www.mamicode.com/www.baidu3.com">百度一下</a>
</body>
</html>

　　-4.伪类选择符

　　　　- 定义：它允许给html标签的某种状态设置样式

　　　　　　1）元素：link：设置超链接a在未被访问前的样式

　　　　　　2）元素：visited：设置超链接a在其链接地址已被访问过时的样式

　　　　　　3）元素：hover：设置元素在其鼠标悬停时的样式

　　　　　　4）元素：active：设置元素在被用户激活(在鼠标点击与释放之间的事件)时的样式

　　　　- 注意：

　　　　　　1）a：hover必须位于a：link和a：visited之后，a：active必须位于a:hover之后

　　　　　　2）可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te(active)，即使用love，hate两个单词来记忆

　　　　　　例子：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul li a{
            font-size: 50px;
        }
        ul li a:link{
            color: blue;
        }
        ul li a:visited{
            color: red;
        }
        ul li a:hover{
            color: yellow;
        }
        ul li a:active{
            color: purple;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="http://www.mamicode.com/#">伪类选择器</a></li>
    </ul>
</body>
</html>

　　-5.伪对象选择符

　　　　-1.元素：before{}：设置在对象前发生的内容，用来和content属性一起使用，并且必须定义content属性。

　　　　-2.元素：after{}：设置在对象后发生的内容。用来和content属性一起使用，并且必须定义content属性。

选择器的优先级：！important>内联>ID>类>标签|伪类|属性选择器>伪对象>继承>通配符

注：！important要写在属性值后面，分号的前面。

　　例:

　　　　　　color: red !important;

　　　　}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
            span{
                /*1*/
                color: red!important;
            }
            p span{
                /*1+1*/
                color: blue;
            }
            p .sc{
                /*1+10*/
                color: aqua;
            }
            p #si{
                /*1+100*/
                color: green;
            }
    </style>
</head>
<body>
    <p>
        <span class="sc" id="si">优先级</span>
    </p>
</body>
</html>

2.css的背景，颜色，边框

　　1.背景：纯色，图片

　　　　background-attchment：背景图像是否固定或者随着页面的其余部分滚动。

　　　　background-color：设置元素的背景颜色

　　　　background-image：把图片设置为背景

　　　　background-position：设置背景图片的起始位置

　　　　background-repeat：背景图片是否以及如何重复

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
          body {
              background-image: url("pic/timg1.jpg");
              background-repeat: no-repeat;
              background-position: center top;
              background-attachment: fixed;
          }
    </style>
</head>
<body>
   <p>哈哈</p>
   <p>哈哈</p>
   <p>哈哈</p>
</body>
</html>

　　2.边框

　　　　border-width：边框宽度

　　　　border-style：边框样式

　　　　border-color：边框颜色

　　　　border-radius：设置圆角边框

　　　　box-shadow：设置对角阴影

　　　　boder-image：边框背景图片

　　3.颜色

　　　　1.颜色值

　　　　　　1.color name(用颜色名称表示)：color：red；

　　　　　　2.HEX（十六进制数值表示法）：color：#ff0000；

　　　　　　3.RGB(三原色：红绿蓝)

　　　　　　4.RGBA(三原色+不透明度[0.0-1.0])

　　　　　　5.透明色：color：transparent

　　　　2.属性

　　　　　　opacity：<number> 设置对象的不透明度

　　　　　　1：不透明

　　　　　　0：完全透明

　　　　例子：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
            border-width: 5px;
            border-color: aqua;
            border-top-color: red;
            border-style: solid;
            border-left-style: dashed;
            border-radius: 5px;
            box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>

Css基础2

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > Css基础2

Css基础2

看完仍有疑问？有类似问题直接问程序猿