内联样式表
CSS代码和HTML代码放在同一个文件中
用法:借助标签中的style属性,在属性中设置样式
<!-- 内联样式 -->
<p style="color: red;">p标签1</p>
内联样式表
CSS代码和HTML代码放在同一个文件中用法:借助网页中的style标签,在标签中设置样式,一般情况下style标签写在head标签的最后。
<!-- 内部样式 -->
<style type="text/css">
/* 把p标签的文本颜色改为红色 */
p{
color: red;
}
</style>
外部样式表
单独创建一个css文件
/* 需求:把所有div标签的文本颜色改成蓝色 */
div{ color: blue;}
用法:通过link标签引入到html当中
<link rel="stylesheet" type="text/css" href="../css/Demo1.css">
rel:当前文件于引入文件之间的关系 层叠样式表
type:引入文件的类型
href:引入文件的地址
CSS的基础语法
h1:需要添加样式的元素
color:给元素添加什么样式
red:样式的值
选择器{
样式:样式值;
}
基本选择器
元素选择器用法:元素名
含义:选中网页中相同的元素
<!-- 给网页中span标签的文本颜色设置成绿色 -->
span{
color: green;
}
<span>彼得,英国留学</span>
Id选择器用法:#id值
含义:选中网页中id为特定值的元素Id一般在使用的时候保证其唯一性,属性没有任何意义,帮助css/js选择元素
#myschool{
color: red;
}
<div id="jqschool">玛丽,剑桥留学</div>
class选择器用法:.class值
含义:选中网页中class为某个特定值的元素class属性没有任何意义,帮助css/js选择元素
.school{
color: #0000FF;
<div class="school">彼得,哈佛大留学</div>
}
子元素选择器用法:父元素 子元素 —> 选择器1 选择器2
含义:通过选择器1选择元素Q,选择器2在元素Q的子标签中再选择
.myp #myspan{
color: red;
<body>
<p class="myp">
<span id="myspan">6-30位字母、数字或“_”,字母开头</span>
</p>
</body>
}
群组选择器用法:选择器1,选择器2,选择器3
含义:只有元素被其中一个选择器选中那么就设置对应样式
#qqid,.intro,a{
color: #00FFFF;
<body>
<div id="qqid">
i am cxy
</div>
<span class="intro">
shsxxt
</span>
<a href="">big data</a>
<p>
last p
</p>
</body>
}
<body>
<div id="qqid">
i am cxy
</div>
<span class="intro">
shsxxt
</span>
<a href="">big data</a>
<p>
last p
</p>
</body>