今天学习的CSS非常喜欢用外部引入,比较干净整洁。
内嵌的CSS比较方便但是看起来比较乱。
<!--css样式的嵌入
1.行间样式:在标签中添加<style>属性
格式:标签名 style="样式:样式值1;样式2=样式值2"
2.内嵌样式:在head标签中添加一个
<style></style>,将样式写在style标签中
选择器:须要给设置设置id属性或者class属性
1.id选择器:必须要给标签设置id属性
例如:id="s1"
<style>
#s1{
样式1:样式值1;
样式2:样式值2
}
</style>
2.class选择器:必须要给标签设置class属性
class:翻译的意思是一类的意思
例如class="pp"
.pp{
样式1:样式值1;
样式2:样式值2
}
3.元素(标签)选择器
标签名{
样式1:样式值1;
样式2:样式值2
}
4
1 选择器之间的关系:
并列关系:
选择器1,选择器2共享样式 必须用逗号分隔!
选择器1,选择器2{
样式1:样式值1;
样式2:样式值2;
父子关系 必须用空格 分隔!
选择器1 选择器2{
样式1:样式值1;
样式2:样式值2;
2选择器之间的优先级:
id选择器>class选择器>元素选择器
5
外部引入:
新建 XXX.CSS文件
在html文件中的head标签中引入CSS文件
格式:<link src="css文件路径">
-->
CSS一些属性 { /* 下划线*/ /* text-decoration: underline;*/ /* 删除线*/ /* text-decoration: line-through;*/ /* 定划线*/ /* text-decoration: overline;*/ /* 转换大小写*/ /* text-transform: uppercase;*/ /* 将所有单词的首字母大写*/ text-transform: capitalize; /* 首行缩进*/ text-indent: 20px; /* 文本水平对齐*/ text-align:center; line-height: 150px; 文字占比例行高 background: red; }
<!--span标签用于包裹文字,给文字添加样式--> <span style="color: #9C10AA;font-size: 20px">bbo</span> <!--id选择器--> <p id="p1">这是一个段落标签</p> <!--class选择器--> <p class="qq">这是一个段落标签</p> <p class="qq">这是一个段落标签</p> <p class="qq">这是一个段落标签</p> <!--元素(标签名)选择器 例如:span{background: red;}--> <span>s1</span> <span>s2</span> <span>s3</span>