CSS:Cascading Style Sheets 层叠样式表
作用:决定如何显示html元素
如何书写css???
1.行间css:在想要设置的元素的标签内, 用style属性书写css样式
2.内联css:在当前文件的head标签里用style标签书写css样式
3.外联css:单独创建一个css文件书写css样式
行间css样式
常用的css样式:
1.宽 width
2.高 height
3.背景色 background-color
4.文字颜色 color
5.文字大小 font-size
6.行高 line-height
7.文本对齐方式 text-align
8.字体类型 font-family
9.首行缩进 text-indent
10.字体粗细 font-weight
11.圆角 border-radius
行间css样式书写语法:
style="样式名1:样式值1;样式名2:样式值2;..."
<p style="background-color:yellow;width:220px;height:200px;color:red;font-size:30px">这是段落标签</p>
行间css样式优缺点:
缺点:
1.违背了W3C的编码理念
2.使得HTML部分变得复杂, 不利于阅读和修改
优点:
1.优先级很高
2.针对性很强
内联css样式
在style标签里, 书写的都是css代码
如果采用内联css样式的写法, 我们需要考虑我们书写的css样式是对html里的哪个标签做的设置.
解决办法:
先找到元素, 再进行css样式设置
我们通过选择器来查找元素
css选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style type="text/css">
/*
1. 标签选择器(元素选择器)
语法:
标签名 {
}
找到当前文档里所有的与标签名相同的标签
*/
/*li {
background-color: red;
}
p {
font-size:30px;
}*/
/*
2. id选择器
语法:
#id名 {
}
找到当前文档里设置了id属性且值为id名的元素, 该选择器只能找到唯一的一个元素, 因为id值是唯一的.
*/
/*#div2 {
font-size:50px;
}
#li5 {
background-color:cyan;
}*/
/*
3. class选择器
语法:
.class名 {
}
该选择器能找到所有的设置了class属性且值为class名的标签
*/
.bgc {
background-color:orange;
}
/*
一个元素可以设置多个class, 中间用空格隔开即可.
*/
/*.fontColor {
color:yellow;
}*/
/*
4. 群组选择器
选择器1, 选择器2, ... {
}
能找到当前文档里所有的各个选择器选择到的元素
*/
/*li,#div2,p {
width: 100px;
height: 100px;
background-color:pink;
}*/
/*
5. 子选择器
语法:
选择器1>选择器2>... {
}
该选择器能找到选择器1表示的元素里与选择器1成父子关系的选择器2表示的元素. ps:子选择器理论上可以无限叠加
*/
#div3>p {
font-size:50px;
color:purple;
}
/*
6. 后代选择器
语法:
选择器1 选择器2 ... {
}
该选择器能找到选择器1表示的元素里与选择器1成后代关系的选择器2表示的元素. ps:后代选择器理论上可以无限叠加
*/
/*#div3 li {
background-color:red;
}*/
/*
7. 相邻兄弟选择器
语法:
选择器1+选择器2 {
}
该选择器能找到与选择器1表示的元素相邻且在其下面的选择器2表示的元素.
*/
/*.bgc+div {
background-color:green;
}*/
#ul1>li+li {
background-color:red;
}
</style>
</head>
<body>
<!--
css选择器: 用来查找html元素
-->
<div id="div1">这是div1</div>
<div class="bgc">这是div</div>
<div id="div2">这是div2</div>
<p class="bgc fontColor">这是段落1</p>
<p class="bgc fontColor">这是段落2</p>
<!-- >表示包含关系 -->
<!-- ul>li{列表项$}*10 -->
<ul id="ul1">
<li class="fontColor">列表项1</li>
<li class="fontColor">列表项2</li>
<li class="fontColor">列表项3</li>
<li class="fontColor">列表项4</li>
<li id="li5" class="fontColor">列表项5</li>
<li class="bgc">列表项6</li>
<li class="bgc">列表项7</li>
<li class="bgc">列表项8</li>
<li class="bgc">列表项9</li>
<li class="bgc">列表项10</li>
</ul>
<div id="div3">
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>
<p>段落3</p>
<p>段落4</p>
</div>
</body>
</html>
外联css样式
引入外部css文件的方法有两种:
1.link标签引入
2.@import方式引入
**link和@import方式引入css的区别:**
1.link方式是html语法, @import是css语法
2.link方式引入是在html文档加载的同时就开始加载css文件. @import方式需要等到html文档加载完毕之后再开始加载css
3.link方式可以引入任何类型的文件, @import只能引入css文件
4.link方式引入的css样式后期我们可以通过js进行修改. @import引入的css后期无法修改.
我们以后使用link方式引入外部css文件
外联css适合去做多页面应用
<link rel="stylesheet" href="css/style.css">
<style type="text/css">
@import url(css/style.css);
</style>
总结
W3C对HTML的开发的编码理念:
结构(html), 样式(css), 行为(js)三者相分离.
扫一扫
1807
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
