css概述
1.CSS是Cascading Style Sheets（级联样式表）。
2.CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面 。
3.可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。
css与html的关系
html是网页内容
css定义页面的样式
样式表
行级样式表:直接接样式写在标签行内,style=“属性名1:属性值;”
<p style="color: blueviolet; font-size: 50px; font-family: 宋体;">
床前明月光
</p>
内嵌样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
内嵌样式表
<style type="text/css">
p{
color: red;
font-size: 50px;
font-family: 宋体;
}
</style>
</head>
<body>
<p>
疑是地上霜
</p>
</body>
</html>
外部样式表:是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中.
p{
color: cyan;
font-size: 50px;
font-family: 宋体;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="css/外部样式表.css"/>
<body>
外部样式表
<p>
举头望明月
</p>
</body>
</html>
选择器
1
常用的选择器：
标签选择器：通过标签选择器可以选择页面中的所有指定标签
语法：标签名 {}
类选择器：通过标签的class属性值选中一组标签
语法：.class属性值{}
id 选择器：通过标签的id属性值选中唯一的一个标签
语法： #id属性值 {}
选择器组合：通过选择器分组可以同时选中多个选择器对应的标签
语法：选择器1,选择器2,选择器N{}
通配选择器:可以用来选中页面中的所有的标签
语法：*{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*标签选择器：可以选中网页中所有的标签
p{
color: #00FFFF;
}
*/
/* 类选择器：匹配指定的类名对应的标签*/
.p1{
color: red;
}
.p2{
color: #00FFFF;
}
.p3{
color: blue;
}
.p1,.p2,.p3{
font-size: 宋体;
}
/* 选择器组合，将共有的属性放在一起 */
/* id选择器 优先级高
#c1{
color: #00FFFF;
} */
/* 通配选择器 */
*{
color: red;
}
</style>
</head>
<body>
<p id="c1"> 静夜思</p>
<p class="p1">床前明月光</p>
<p class="p2">疑是地上霜</p>
<p class="p3">举头望明月</p>
<p class="p3">低头思故乡</p>
<p>我是猪</p>
</body>
</html>
2
常用的选择器：
后代选择器：选中指定标签的指定后代标签
语法： 祖先标签 后代标签{}
子标签选择器：选中指定父标签的指定子标签
语法： 父标签 > 子标签
选中指定标签的相邻标签
语法：选择相邻选择器：器 + 相邻{}
兄弟选择器：选中指定标签的兄弟标签
语法：选择器 ~ 兄弟{}
标签之间的关系
父标签：直接包含子标签的标签
子标签：直接被父标签包含的标签
祖先标签：直接或间接包含后代标签的标签，父标签也是祖先标签
后代标签：直接或间接被祖先标签包含的标签，子标签也是后代标签
兄弟标签：拥有相同父标签的标签叫做兄弟标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 后代选择器
.a1 i{
color: red;
} */
/* 子标签选择器
.a1>.a2{
color: green;
}
*/
/* 选中指定标签的相邻标签
.a1+.a3{
color: #00FFFF;
}
*/
/* 兄弟选择器 */
.a1~p{
color: #FF0000;
}
</style>
</head>
<body class="a5">
<p class="a1">
<i class="a2">
选择器
</i>
</p>
<p class="a3">
<i>优先级</i>
</p>
<h3 class="a4">eeeeeee</h3>
<h2 class="a4">rrrrrrrrrrr</h2>
</body>
</html>
样式的继承
在CSS中，祖先标签上的样式，也会被他的后代标签所继承, 利用继承，可以将一些基本的样式设置给祖先标签，这样所有的后代标签将会自动继承这些样式。
文本
color：字体颜色
font-size：字体大小
font-family：字体
text-align：文本对齐
text-decoration:line-through：定义穿过文本下的一条线
text-decoration:underline：定义文本下的一条线
text-decoration:none：定义标准的文本
font-style: italic;斜体文本
font-weight:字体粗细
line-height:设置行高
letter-spacing可以指定字符间距
text-indent用来设置首行缩进
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.b1{
color: blue;
font-size:30px;/* 字体大小 */
font-family:楷体;/* 字体 */
text-align: center;
/* text-decoration:line-through; 穿过文本下的一条线*/
/* text-decoration:underline;定义文本下的一条线 */
/* text-decoration:none; 定义标准的文本,没有花里胡哨的线
例如:a{
text-decoration:none;
}可以去除超链接的下划线*/
font-style: italic;/* 斜体文本 */
font-weight: bold;/* 字体粗细 */
line-height: 30px; /* 设置行高*/
letter-spacing: 10px;/* 指定字符间距 */
text-indent:2em ;/* 首行缩进 */
}
</style>
</head>
<body>
<p class="b1">
德玛西亚无可匹敌德玛西亚无可匹敌德玛西亚无可匹敌德玛西亚无可匹敌德玛西亚无可匹敌德玛西亚无可匹敌德玛西亚无可匹敌德玛西亚无可匹敌德玛西亚无可匹敌德玛西亚无可匹敌德玛西亚无可匹敌德玛西亚无可匹敌德玛西亚无可匹敌德玛西亚无可匹敌
</p>
</body>
</html>
背景
背景的属性大概有五种.
background-color背景颜色
background-image为背景图片
background-repeat可以设置背景是否重复
background-size可以设置背景的尺寸大小
background-position设置背景图片的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
width: 800px;
height: 800px;
background-color: aquamarine;/* 背景颜色 */
background-image: url(./img/baidu.ico);/* 背景图片选择 */
background-repeat: no-repeat;/* repeat有重复 no-repeat无重复 repeat-x x轴有重复 repeat-y y轴有重复 */
background-size: 500px 500px;/* 背景图片的大小 */
background-position:right top;/* 背景图片位置 */
}
</style>
</head>
<body>
<p>
</p>
</body>
</html>
css列表
CSS 列表属性可以放置、改变列表项标志，或者将图像作为列表项标志 。
list-style-image 可将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
list-style 简写属性。
list-style 简写属性是为了将代码简洁化.将设置列表项标志和列表项位置,列表项标志的类型和在一起写,不分先后顺序.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.c1>li{
text-align: center;
/* list-style-type: none; 设置列表项标志的类型*/
/* list-style-image: url(./img/baidu.ico); 将图像设置为列表项标志*/
/* list-style-position: inside; 设置列表中列表项标志的位置*/
list-style: none url(img/baidu.ico) inside;
}
</style>
</head>
<body>
<ul class="c1">
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ul>
<ul>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ul>
</body>
</html>
扫一扫
635
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
