1.什么是CSS？
CSS是指层叠样式表（cascading style sheets）。
它定义了如何显示HTML元素的样式{颜色/形状/大小....}
HTML 超文本语言是用来创建网页的内容
2.CSS的作用？
给网页html的元素标记标签设置样式的，可以让html看起来更加好看
为了解决内容和html的元素与样式分离的问题
3.在html中怎样使用CSS？
（1）.内联定义 (Inline Styles)
在html开始标记中通过style属性来设置当前元素的样式。
缺点:使得原来的html标记变得复杂，不利于修改。
场景:设置的样式很少的时候
<h1 style="color: red;font-size: 50px;">
内联定义--在html开始标记中通过style属性来设置当前元素的样式。
</h1>
（2）.内部样式块 (Embedding a Style Block)
内部--html中
块----集中设置样式属性
在html的head标记中通过style标记集中设置样式属性
缺点:设置的样式属性很多的时候，会使得html页面本身臃肿，出现喧宾夺主。
场景:设置的样式很少的时候
<style>
#myh1{
color: blue;
font-size: 50px;
}
</style>
<h1 id="myh1">内部样式块--在html的head标记中通过style标记集中设置样式属性</h1>
（3）.链入外部样式表文件 (Linking to a Style Sheet)
用一个独立的文件来保存样式，在html中通过link标记链接进来
第一步：建立外部样式表文件（.css）
mytest.css
#myh2{
color: green;
font-size: 50px;
}
第二步：在html的head标记中使用link标记导入样式文件。
<link rel=stylesheet href="样式文件的路径" type="text/css">
例如:<link rel="stylesheet" href="mytest.css" type="text/css"/>
解决了内容【[html]的元素】与表现【样式】分离,css代码可以达到很高的重用性
场景:使用于大量的css样式设置时
4.CSS语法
在上面的实例中内部样式块定义css与链入外部样式表文件中的css写法相同
内部样式块声明定义css
#myh1{
color: blue;
font-size: 50px;
}
链入外部样式表文件中的css
#myh2{
color: green;
font-size: 50px;
}
CSS 语法规则由两个主要的部分构成：
1.选择器
2.属性设置【一条/多条】
#myh2{color: green;font-size: 50px;}
#myh2----选择器
color: green;font-size: 50px;---属性设置
5.CSS选择器
选择器--设置需要样式的html元素
在一个html文件中，会出现很多html元素，如果要指定某一个元素设置一个样式，就需要选择一个选择器
（1.）元素选择器-----根据html元素的名称选中一个或者一组元素，设置一个样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素选择器</title>
<style>
h1{
color: red;
}
p{
color: chartreuse;
font-size: 30px;
}
</style>
</head>
<body>
<h1>元素选择器--根据html元素的名称选中一个/一组元素，设置样式</h1>
<p>测试元素选择器</p>
<p>测试元素选择器</p>
</body>
</html>
（2.）id选择器----根据html的id属性选中一个或者一组设置一个样式（#id）
html----<a id="a1"></a>
css-----#a1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#num1{
color: blue;
}
#test1{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<h1 id="num1">id选择器--根据html元素的id属性选中一个/一组元素设置样式【css--#[id]】</h1>
<p id="test1">html----<a id="a1"></a></p>
<p id="test1">css-----#a1</p>
</body>
</html>
（3.）class样式（类选择器）---根据html元素的class属性中选择一个或者一组设置样式（.class）
html----<a class="a1"></a>
css-----.a1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.test1{
color: red;
}
.num2{
color: yellow;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="test1">class选择器[类选择器]--根据html元素的class属性选中一个/一组元素设置样式【css--.[class]】</h1>
<span class="num2">html----<a class="a1"></a></span>
<span class="num2">css----.a1</span>
</body>
</html>
（4.）包含选择器--得到所有父与子包含的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div_fu{
width: 800px;
background-color: yellow;
}
#div_zi{
width: 760px;
background-color: greenyellow;
}
#div_fu h1{
color: blueviolet;
}
</style>
</head>
<body>
<h1>包含选择器---得到所有被父元素包含的子元素/子子元素。</h1>
<div id="div_fu">
<div id="div_zi">
<h1>h1元素是id="div_fu"d的div的子子元素【孙子】</h1>
</div>
<h1>h1元素是id="div_fu"的div的子元素</h1>
</div>
</body>
</html>
（5.）子元素选择器--得到指定父元素的直接子元素，而不是所有子元素
（除了儿子 不管子中子）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div_fu{
width: 800px;
background-color: yellow;
}
#div_zi{
width: 760px;
background-color: greenyellow;
}
#div_fu > h1{
color: blueviolet;
}
</style>
</head>
<body>
<h1>子元素选择器---得到指定父元素的直接子元素，而不是所有子元素。</h1>
<div id="div_fu">
<div id="div_zi">
<h1>h1元素是id="div_fu"d的div的子子元素【孙子】</h1>
</div>
<h1>h1元素是id="div_fu"的div的子元素</h1>
</div>
</body>
</html>
（6.）属性选择器---根据html元素上的属性名称以及属性值选择元素
<a id="a1" href="#" class="myclass" target=""></a>
id,href,class,target都是a标记的属性
a1,#，myclass是id,href,class属性的值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a{
font-size: 50px;
}
a[id]{
color: yellow;
}
/*
a[id=a2]{
color: red;
}
*/
a[class]{
color: red;
}
</style>
</head>
<body>
<h1>属性选择器--根据html元素上的属性名称以及属性值选择元素</h1>
<h2><a id="a1" href="#" class="myclass" target=""></a></h2>
<h2>id,href,class,target都是a标记的属性</h2>
<h2>a1,#，myclass是id,href,class属性的值。</h2>
<a id="a1" href="id_selecter.html">超链接1-打开id选择器文件</a><br>
<a id="a2" class="myclass" href="class_selecter.html">超链接2-打开class选择器文件</a>
</body>
</html>
6.CSS中的常用属性
1.背景属性设置
background-color：定义了元素的背景颜色
background-image：定义了元素的背景图像，
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
background-image：url('图片路径')
background-repeat：设置背景图像水平或垂直平铺
repeat--水平或垂直都平铺
repeat-x：水平平铺
repeat-y：垂直平铺
no-repeat：不平铺
background-attachment: 设置背景图像是否固定或者随着页面的其余部分滚动。
scroll:背景图片随着页面的滚动而滚动，这是默认的。
fixed：背景图片不会随着页面的滚动而滚动。
background-position: 属性设置背景图像的起始位置。
left top / left center / left bottom
right top / right center / right bottom
center top / center center /center bottom
x% y% 第一个值是水平位置，第二个值是垂直。
左上角是0％0％。右下角是100％100％。
如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
<style>
h1{
background-color:red;
}
body{
background-image:url('imgs/avatar.png');
background-repeat: no-repeat;
background-attachment:fixed;
background-position:center center;
}
</style>
<h1>background--背景属性设置</h1>
<h3>
background-color：定义了元素的背景颜色<br>
background-image：定义了元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.<br>
background-repeat：设置背景图像水平或垂直平铺<br>
background-attachment: 设置背景图像是否固定或者随着页面的其余部分滚动。<br>
background-position: 属性设置背景图像的起始位置。
</h3>
2.文本属性设置
color:设置文字的颜色
text-align:设置文本的水平对齐方式[居中或对齐到左或右,两端对齐]
vertical-align:设置一个元素的垂直对齐方式[top/middle/bottom]
text-decoration:设置或删除文本的装饰
underline：下划线
overline：上划线
line-through:删除线【贯穿线】
none:没有线
注意:text-decoration：none 可以消除超链接默认的下划线
text-transform: 用来指定在一个文本中的大写和小写字母,可设置大写或小写字母，或每个单词的首字母大写。
lowercase:小写字母
uppercase:大写字母
capitalize:首字母大写
text-indent:指定文本的第一行的缩进
letter-spacing:设置字符间距
word-spacing:设置单词与单词之间的距离
line-height:设置行高
text-shadow :设置文字阴影
text-shadow: 水平拉伸距离 垂直拉伸距离 清晰度 阴影颜色;
<style>
#h41{color: red;}
#h42{color: red;text-align:center}
.top{vertical-align: bottom;}
#h44{text-decoration:none;}
#h45{text-transform:capitalize;}
#h46{text-indent:50px;}
#h47{letter-spacing:10px;}
#h48{word-spacing:50px;}
p{line-height:50px;}
#h49{text-shadow:10px 10px 2px red;}
</style>
<body>
<h4 id="h41">color:设置文字的颜色</h4>
<h4 id="h42">text-align:设置文本的水平对齐方式[居中或对齐到左或右,两端对齐]</h4>
<h4>vertical-align:设置一个元素的垂直对齐方式</h4>
<p>一个<img class="top" src="imgs/avatar.png" width="150" height="150"/> text-top 对齐的图像。</p>
<h4 id="h44">text-decoration:设置或删除文本的装饰</h4>
<h4 id="h45">text-transform:用来指定在一个文本中的大写和小写字母,可设置大写或小写字母，或每个单词的首字母大写。</h4>
<h4 id="h46">text-indent:指定文本的第一行的缩进</h4>
<h4 id="h47">letter-spacing:设置字符间距</h4>
<h4 id="h48">word spacing:控制单词与单词之间的距离</h4>
<h4>line-height:设置行高</h4>
<p>
line-height:设置行高<br>
line-height:设置行高
</p>
<h4 id="h49">text-shadow :设置文字阴影</h4>
</body>
扫一扫
466
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
