学习层叠样式表（CSS）＜一＞

最新推荐文章于 2024-09-05 23:48:57 发布

雷亚文

最新推荐文章于 2024-09-05 23:48:57 发布

阅读量102

点赞数

分类专栏： HTMLCSS 文章标签： css html5 javascript

本文链接：https://blog.csdn.net/m0_46331585/article/details/119191919

版权

HTMLCSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

层叠样式表（css）

css即层叠样式表。用此技术可以有效的对页面的布局、字体、颜色、背景和其他效果实现更加金准的控制。在一定程度上解决了兼容性问题。

标签选择器（元素选择器）

通配符选择器 *（改变全部的，所有的，很霸道）
```
*{

}
例如
*{
    font-size: 30px;
color: #777;
}
```

标签选择器(对目标标签进行修饰)

标签{
}
例如
button{
 font-size: 14px;
}

属性选择器（在标签选择器的基础上加上属性）

标签[属性]{
}
例如
input[type=url]{
    border: 1px dashed orange;
}
几种特殊形式
input[name*=uesr]{
}
注释：name中包含"user"的都有效
input[name~="mydiv"]{
}
注释：在names属性值中包含"mydiv"整个单词的，多一个字母或少一个字母都不行，数字例外（数字不能在首位）

类选择器（属性选择器的特例）

.mylifont{
    font-size: 20px;
}
<body>
    <input type="text" class="mylifont">    修饰此行
    <input type="password">                 不修饰此行
<body/>

ID选择器

#div1{
     width: 120px;
     height: 30px;
     background-color: gray;
     text-align: center;
     line-height: 35px;
     }
<body>
    <div id="div1">    命名这个div的div1
</body>
注释：处于一个好的编程习惯，同一个id不要在页面内出现两次

伪类选择器

有时候还需要用文档以外的其他条件来应用元素样式，比如鼠标悬停在超链接上时，改变超链接的外观等。这样我们就需要用到伪类了。

伪类              说明
a:link           未访问状态
a:visited        已访问状态
a:hover          鼠标悬停状态
a:active         激活选定状态（鼠标点击未释放时）
注释：这四个顺序不能调换。

伪类选择器分为两种。

（1）静态伪类：只能用于超链接的样式。如下：
:link 超链接点击之前
:visited 链接被访问过之后
:first-child 匹配作为任何元素的第一个子元素
:last-child 匹配作为其父的最后一个子元素
PS：以上两种样式，只能用于超链接。
（2）动态伪类：针对所有标签都适用的样式。如下：
:hover “悬停”：鼠标放到标签上的时候
:active “激活”： 鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
:checked  input:checked 选择每个被选中的 <input> 元素。
:disabled input:disabled 选择每个被禁用的 <input> 元素。

伪类选择器超链接练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            a:link{
                color: black;
                text-decoration: none;
            }
            a:visited{
                color: black;
            }
            a:hover{
                color: orange;
                text-decoration: underline;
            }
            a:active{
                color: palevioletred;
            }
        </style>
    </head>
    <body>
        <a href="https://news.sina.com.cn/gov/2021-07-27/doc-ikqcfnca9334008.shtml">四川凉山脱贫后首个火把节</a>
    </body>
</html>

雷亚文

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
学习层叠样式表（CSS）＜一＞

层叠样式表（css） css即层叠样式表。用此技术可以有效的对页面的布局、字体、颜色、背景和其他效果实现更加金准的控制。在一定程度上解决了兼容性问题。标签选择器（元素选择器）通配符选择器 *（改变全部的，所有的，很霸道） *{}例如*{ font-size: 30px;color: #777;} 标签选择器(对目标标签进行修饰) 标签{}例如button{ font-size: 14px;} 属性选
复制链接

扫一扫