标签：stc 没有 ali doc 页面 oct 基础 基础语 属性选择器
CSS介绍
CSS是指层叠样式表，CSS样式表极大的提高了工作效率
CSS基础语法
1. 首先选择一个属性
2. 选择了属性以后，用大括号括起来
3. 括号里面是对应的属性和属性值，如：
selector {
property: value;
}
举一个实际的例子，就像这样：
h1是属性，然后一个大括号，括号中的color是属性，后面跟着对应的属性值red，设置结束后需要用;来分别各个属性
h1 {
color: red;
font-size: 14px;
}
使用CSS样式：
需要在html中来使用CSS样式，可以用<link>标签来调用CSS文件，如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<!-- 调用CSS样式表 -->
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<h1>我被CSS改变了。</h1>
</body>
</html>
CSS选择器分组：
选择器分组就是将一堆页面元素，一起定义：
h1, h2, h3, p, a{
color: red;
font-size: 14px
}
CSS派生类选择
根据元素在其位置的上下文关系来定义样式，就比如标签中的标签，如果直接定义body元素，就会把其中所有的值都改变，但是单单针对某些元素来定义，也是可以的。当然针对一个元素定义的样式的优先级，要比定义<body>全部样式的优先级高。所以即使是<body>修改了样式，也可以针对单个元素进行修改。
如下代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<!-- 调用CSS样式表 -->
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<!-- 标签中的标签 -->
<body>
<p>我是小p，我是body p{}指定的标签改变的</p>
<h1>我是标题</h1>
</body>
</html>
然后我们用CSS样式来修改
body{
color: green;
}
body p{
color: red;
}
可以看到，将body全部定义成绿色了，但是如果指定body中的p元素进行定义，还是可以将其改变颜色的。所以指定的元素的优先级要比全部定义的高。相反没有指定定义的h1标题，就是绿色。
ID选择器
id选择器可以为标有id的HTML元素指定特定的样式，id选择器以“#”来定义。id选择常常用于简历派生选择器，他们经常一起来使用
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<!-- 调用CSS样式表 -->
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div id="testid">
呵呵呵呵
<p>哈哈哈，我被指定定义了颜色，id与元素经常一起使用！</p>
</div>
</body>
</html>
/*id可以直接用#号来表示*/
#testid{
color: green;
}
#testid p{
color: red;
}
CSS类选择器
类选择器是以一个点“.”来显示的，class也可以结合派生选择器来一起使用，比如定义了一个元素<div class="testclass">
利用CSS可以如下修改：
/*class可以需要用“.”来表示*/
.testclass{
color: green;
}
.testclass p{
color: red;
}
属性选择器：
属性选择器就是针对标签中的属性来进行修改，当然，也可以根据属性的值，来针对性的修改：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<!-- 调用CSS样式表 -->
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<ol type="I">
<li>属性选择器</li>
<li>属性选择器</li>
<li>属性选择器</li>
</ol>
<ol type="1">
<li>属性选择器</li>
<li>属性选择器</li>
<li>属性选择器</li>
</ol>
<ol type="a">
<li>属性选择器</li>
<li>属性选择器</li>
<li>属性选择器</li>
</ol>
</body>
</html>
然后用CSS来修改
/*如果没有值，通过属性修改全部的样式*/
[type]{
color: red;
}
/*有值的话，就是针对值进行修改*/
[type="a"]{
color: green;
}
总结：
主要学习了CSS的用法，已经派生选择器的使用，id选择器的使用，class选择器的使用和属性选择器的使用
id---以“#”开头
class---以“.”开头
属性选择器---以[]在括号类填写属性和值
派生选择器---直接调用标签，如：<p>{}
标签：stc 没有 ali doc 页面 oct 基础 基础语 属性选择器
原文地址：https://www.cnblogs.com/BBM2ssm/p/10498685.html
