🏍️作者简介:大家好,我是亦世凡华、渴望知识储备自己的一名在校大学生
🛵个人主页:亦世凡华、的博客
🛺系列专栏:CSS专栏
🚲给大家推荐一个网站😉很实用😚我一直在上面刷题:点击跳转进入网站 注册登录即可刷题
目录
CSS简介
什么是CSS:
CSS(Cascading Style Sheets的缩写),翻译为“层叠样式表”或者“级联样式表”,简称样式表。
CSS的主要作用:
主要用来给HTML网页设置 外观或者样式(HTML网页中的文字大小、颜色、字体、网页的背景颜色、背景图片等)。
CSS的语法规则:
CSS代码由选择器和一对括号组成;大括号里面是由一条条的声明语句组成;每一条语句都要使用英文状态下面的分号;每一条语句是由“属性:值”组成;CSS中的属性值一般不加引号;在CSS中如果属性值为数值型数据的时候,一般情况下需要加单位,单位一般都是px(像素);在CSS中不能出现HTML标签。
CSS代码的书写方式:
嵌入式:是通过HTML中的<style>标签将CSS代码嵌入到HTML中,语法规则如下:
<style type="text/css">
/*书写CSS代码,如果使用的是HTML5文档,type属性可以省略*/
选择器{属性:值;属性:值}
</style>
外链式:是指单独写一个以.css为扩展名的文件,然后在<head></head>标签中使用<link/>标签,将这个css文件链接到html文件中,语法规则如下:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=], initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
</head>
如果确保引入文件成功,以谷歌浏览器举例:
刷新网页出现.css文件可以说明我们引入文件成功,我们也可以引入多个CSS文件,只需要写link标签就可以了。
行内式:是指将CSS代码书写在HTML标签的style属性(style是一个通用属性,每一个标签里面都拥有这个属性)中,其语法格式如下:
<标签名 style="属性:值;属性:值"></标签名>
例如
<div style="width: 100px; height:100px; background-color:red"></div>
总结:
使用嵌入式的方式来书写CSS代码,它只能作用于当前的HTML文件。
使用外链式的方式来书写CSS代码,它可以作用于多个HTML文件。
选择器
什么是选择器:
选择器是指通过一定的语法规则选取到对应的HTML标记,然后给这个对应的HTML标记设置样式
选择器的分类:
基本选择器、复合选择器、伪类选择器、属性选择器。
基本选择器的介绍:
选择器 |
格式 |
含义 | 举例 |
---|---|---|---|
通用选择器 | *{属性:值;} |
通用选择器,将匹配HTML所有标签。 不建议使用,IE6不支持,给大型网站增加负担。 |
*{margin:0px;} |
标签选择器 | 标签名{属性:值;} | 标签选择器,匹配对应的HTML标签。 | p{font-size:14px;} |
类选择器 | .class属性值{属性:值;} | 类选择器,给拥有指定的CLASS属性值的元素设置样式 | .box{width:400px;} |
Id选择器 | #id属性值{属性:值;} |
Id选择器可以为标有特定的ID的HTML元素指定特定的样式,只能使用一次,ID选择器以“#”来定义。 |
#title{font-size:14px;} |
复合选择器的介绍:
选择器 | 含义 | 举例 |
---|---|---|
多元素选择器: 选择器1,选择器2{属性:值;} |
多元素选择器,同时匹配选择器1和选择器2, 多个选择器之间用逗号分隔 |
p,h1,h2{margin:0px} |
后代元素选择器: E F{属性:值;} |
后代元素选择器,匹配所有属于E元素后代的F元素 E和F之间用空格分隔 |
#slidebar p{font-color:#000} |
子元素选择器: E>F{属性:值;} |
子元素选择器,匹配所有E元素的子元素F | div > p{color:#008c8c} |
相邻元素选择器: E+F{属性:值} |
相邻元素选择器,匹配所有紧随E元素之后的同级元素F | div + div{color:#008c8c} |
多元素选择器举例:
后代元素选择器举例:
子元素选择器举例:
相邻元素选择器: 注意以下几点:
第一点:E元素与F元素必须是兄弟关系 平辈关系
第二点:E元素与F元素必须要紧挨着,就是之间没有任何元素阻挡。
第三点:要求F元素一定是在E元素的下面
伪类选择器的介绍:
什么是伪类选择器:
伪类选择器是用来给超级链接的不同状态来设置样式。
超级链接的四种不同状态:正常状态、访问过后状态、鼠标放上状态、激活状态。具体如下:
选择器 | 含义 |
---|---|
:link | 向未被访问的链接添加样式 |
:visited | 向已被访问的链接添加样式 |
:hover | 当鼠标悬浮在元素上方时,向元素添加样式 |
:active | 鼠标放在元素上面时,点击的一瞬间 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:link{/* 正常状态 */
color: #f00;/* 红 */
}
a:visited{/* 访问过后状态 */
color: #000;/* 黑 */
}
a:hover{/* 鼠标悬停状态 */
color: gold;/* 黄 */
}
a:active{/* 激活状态 */
color: #0f0;/* 绿 */
}
</style>
</head>
<body>
<a href="http://www.bilibili.com">哔哩哔哩</a>
<a href="http://www.douyu.com">斗鱼</a>
<a href="http://www.123.com">123</a>
</body>
</html>
默认正常状态下,我们设置为红色如下
访问过后在回到页面,颜色如下:
鼠标悬停时的颜色如下:
当鼠标按下去,但是没有松开,打开网站处于激活状态,颜色如下:
总结:
超级链接的不同状态它其实是有顺序的,也就是说伪类选择器设置其实是有顺序的。如果不按照伪类选择器的顺序,那么样式就会失效。
顺序:要遵循 “爱恨法则” 要先有爱,才有恨。“Love Hate”。
超级链接的美化:
我们通常会去掉超级链接的下划线,然后同时会给超级链接设置一个颜色。一般情况下:
正常状态与访问过后的状态的样式设置为一样;当鼠标放上的时候给其设置为另外一个颜色,激活状态一般不会设置,因为激活状态的时间太短。举例:
/*正常状态与访问过后的状态*/
a:link,a:visited{
text-decoration: none; color: #444;
}
/*鼠标放上状态*/
a:hover{
color: #f00;
text-decoration:underline;
}
属性选择器的介绍:
什么是属性选择器:
属性选择器它是与标签的属性名和属性值有关,通过标签的属性名和属性值来匹配元素。
attr是英文单词 “attribude”的简写,中文意思 “属性” 属性名
val是英文单词 “value”的简写,中文意思是“值” 属性值
选择器 | 含义 | 举例 |
---|---|---|
[attr] | 匹配所有具有attr属性的元素,不考虑它的值 |
h1[align]{…..} input[type][size]{…..} |
[attr = “val”] | 匹配所有attr属性值等于val的元素 |
h1[align=”center”]{…..} 属性值一般加引号 |
[attr^ = “val”] | 匹配元素中attr属性以指定值开头的所有元素 | Font[color^ = “#ff”] |
[attr$ = “val”] | 匹配元素中attr属性以指定值结尾的所有元素 | Font[color$ = “00”] |
[attr* = “val”] | 匹配元素中attr属性中包含指定值的所有元素 | Font[color* = “00”] |
根据上表介绍属性选择器的具体特性,下面分别举例说明各个特点:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p[align]{
color: #f00;
}
</style>
</head>
<body>
<p align="center">我是p标签</p>
<div align="center">我是div标签</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[align=center]{
color: #f00;
}
</style>
</head>
<body>
<p align="center">我是p标签</p>
<div align="center">我是div标签</div>
<p align="left">我是p标签2号</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
font[color^="FF"]{
border: 1px solid #00f;
}
</style>
</head>
<body>
<font color="#FF0000">颜色</font>
<font color="#FFAA00">颜色</font>
<font color="FFaabb">颜色</font>
<font color="aacc00">颜色</font>
<font color="FFaabb">颜色</font>
<font color="ddaabb">颜色</font>
</body>
</html>
以上面代码为例:
以上面代码为例: 找到包含aa的属性标签,注意:aa是不区分大小写的
🍃前端的学习还是要以多练习为主,想要练习HTML的朋友,推荐可以去牛客网看一看,链接:牛客网 里面的IT题库内容很丰富,属于国内做的很好的了,最重要的是里面的资源是免费的,是课程+刷题+面经+求职+讨论区分享,一站式求职学习网站,感兴趣的可以去看看。
今天的讲解就到这了,关注专栏了解更多知识。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/140126.html