CSS基础
目标
知道CSS的作用
基本掌握CSS语法规则
CSS简介
CSS:(Cascading Style Sheets)指层叠样式表
作用:用来定义如何显示HTML元素(定义HTML元素的样式),就像 HTML 中的字体标签和颜色属性所起的
作用那样
样式通常保存在外部的 .css 文件中,我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观
CSS语法
CSS规则由两个主要的部分构成:选择器,以及一条或多条声明。
选择器:是用来指定要改变样式的HTML元素
每条声明由一个属性和一个值组成
属性代表要设置的样式属性,每个属性有一个值,属性和值被冒号分开
CSS声明总是以分号(;)结束,声明总以大括号({})括起来
在HTML文档中,可以把样式定义在 <style></style> 标签中
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p {color:red; text-align:center;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
CSS注释
注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它
CSS注释以 /* 开始, 以 */ 结束
示例:
<style>
/*这是个注释*/
p {
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}
</style>
CSS选择器
目标
掌握id选择器的语法
掌握class选择器的语法
掌握标签选择器的语法
掌握属性选择器的语法
掌握后代选择器的语法
掌握子元素选择器的语法
CSS选择器介绍
在CSS中,选择器是一种模式,用于选择需要添加样式的元素。常用的CSS选择器有:
id选择器
class选择器
标签选择器
属性选择器
后代选择器
子元素选择器
id选择器
id选择器是通过元素的id属性来选择元素
使用id选择器时,要求元素必须有id属性
CSS中id选择器以 "#" 来定义,比如: #test01
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
#test01 {color:red; text-align:center;}
</style>
</head>
<body>
<p id="test01">Hello World!</p>
</body>
</html>
id属性的命名规则和唯一性
命名规则:
不要以数字开头
不能使用中划线和下划线之外的符号
不推荐使用中文
尽量做到见名知意:见到名字知道意思
唯一性:
在整个HTML文档中id属性必须是唯一的
注意:HTML文档不会严格校验id属性是否唯一,在不规范的HTML文档中会出现id重复的情况!!!
class选择器
class选择器是通过元素的class属性来选择元素,又称类选择器
使用class选择器时,要求元素必须有class属性
class选择器用于描述一组元素的样式,class选择器有别于id选择器,class可以在多个元素中使用
CSS中class选择器以 "." 来定义,比如: .center
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.center {text-align:center;}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">第一段文字</p>
<p class="center">第二段文字</p>
</body>
</html>
class属性的第一个字符不能使用字符串
标签选择器
标签选择器是通过元素的标签名称来选择元素,又称元素选择器
CSS中标签选择器直接使用标签名称来定义,比如: p 、 input
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
h1 {text-align:center;}
p {color:red;}
</style>
</head>
<body>
<h1>标题居中</h1>
<p>第一段文字</p>
<p>第二段文字</p>
</body>
</html>
属性选择器
属性选择器可以根据元素的属性及属性值来选择元素
属性选择器可以使用HTML元素的任意属性,而不仅限于id和class属性
简单属性选择:
如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器;
格式: [属性名]
根据具体属性值选择:
除了选择拥有某些属性的元素,还可以进一步缩小选择范围,只选择有特定属性值的元素;
格式: [属性名="属性值"]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
[href]{color: red;}
[title="古诗标题"] {color:blue;}
[id="first"] {color:green;}
[class="second"] {color:yellow;}
</style>
</head>
<body>
<a href="https://www.itheima.com">软件测试</a>
<h1 title="古诗标题">劝学</h1>
<p id="first">故不积跬步,无以至千里。</p>
<p class="second">不积小流,无以成江海。</p>
</body>
</html>
后代选择器
后代选择器可以选择作为某元素后代的元素,后代元素包括(儿子、孙子、重孙子...)
语法规则:多个选择器用空格分隔,例如 p span{color: red;}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
/*p span{color: red;}*/
div span{color: red;}
</style>
</head>
<body>
<div>
<span>我是span</span>
<p>
<span>我也是span</span>
<br/>
<span>我也是span</span>
</p>
</div>
</body>
</html>
子元素选择器
与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素
不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素文章来源:https://www.toymoban.com/news/detail-411958.html
语法规则:多个选择器用大于号 > 分隔,例如 div>span{color: red;}文章来源地址https://www.toymoban.com/news/detail-411958.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
div>span{color: red;}
</style>
</head>
<body>
<div>
<span>我是span</span>
<p>
<span>我也是span</span>
<br/>
<span>我也是span</span>
</p>
</div>
</body>
</html>
到了这里,关于【测试基础】之03 CSS入门基础的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!