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: aquamarine;
font-size: 30px;
}
</style>
<h1 id="myh1">内部样式块--在html的head标记中通过style标记集中设置样式属性</h1>
3）链入外部样式表文件 (Linking to a Style Sheet)
用一个独立的文件来保存样式，在html中通过link标记链接进来
第一步：建立外部样式表文件（.css）
mytest.css
#myh2{
color: aque;
font-size: 30px;
}
第二步：在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: aquamarine;
font-size: 30px;
}
</style>
</head>
<body>
<h1>元素选择器--根据html元素的名称选中一个/一组元素，设置样式</h1>
<p>测试元素选择器</p>
<p>测试元素选择器</p>
</body>
</html>
2)id选择器--根据html元素的id属性选中一个/一组元素设置样式【css--#[id]】
html----<a id="a1"></a>
css-----#a1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style>
#test1{
color: bisque;
font-size: 30px;
}
#num1{
color: aqua;
}
</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属性选中一个/一组元素设置样式【css--.[class]】
html----<a class="a1"></a>
css-----.a1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类class选择器</title>
<style>
.num2{
color: aquamarine;
font-size: 30px;
}
.test1{
color: aliceblue;
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"> class----.a1</span>
</body>
</html>
4)包含选择器---得到所有被父元素包含的子元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>包含元素</title>
<style>
#div_fu{
width: 900px;
background-color: aqua;
}
#div_zi{
width: 800px;
background-color:yellow;
}
#div_fu h1{
color: red;
}
</style>
</head>
<body>
<h1>包含选择器---得到所有被父元素包含的子元素</h1>
<div id="div_fu">
<div id="div_zi">
<h1>
h1元素是id="div_fu"的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: 900px;
background-color: aqua;
}
#div_zi{
width: 800px;
background-color:yellow;
}
#div_fu > h1{
color: red;
}
</style>
</head>
<body>
<h1>子元素选择器---得到指定父元素的直接子元素，而不是所有子元素.[只管儿子，孙子不管]</h1>
<div id="div_fu">
<div id="div_zi">
<h1>
h1元素是id="div_fu"的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></h2>
</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％
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景属性设置</title>
<style>
h1{
background-color: red;
}
body{
background-image:url('imgs/ca3398ac12c278a407f4478ec3d7a2c.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center center;
}
</style>
</head>
<body>
<h1>background--背景属性设置</h1>
<h3>
background--colcr:定义了元素的背景颜色<br>
background-image：定义了元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.<br>
background-repeat：设置背景图像水平或垂直平铺<br>
repeat:水平垂直都平铺/ repeat-x:水平平铺/ repeat-y:垂直平铺 no-repeat:不平铺
background-attachment: 设置背景图像是否固定或者随着页面的其余部分滚动。<br>
background-position: 属性设置背景图像的起始位置。
</h3>
<h3>
background--colcr:定义了元素的背景颜色<br>
background-image：定义了元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.<br>
background-repeat：设置背景图像水平或垂直平铺<br>
repeat:水平垂直都平铺/ repeat-x:水平平铺/ repeat-y:垂直平铺 no-repeat:不平铺
background-attachment: 设置背景图像是否固定或者随着页面的其余部分滚动。<br>
background-position: 属性设置背景图像的起始位置。
</h3>
<h3>
background--colcr:定义了元素的背景颜色<br>
background-image：定义了元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.<br>
background-repeat：设置背景图像水平或垂直平铺<br>
repeat:水平垂直都平铺/ repeat-x:水平平铺/ repeat-y:垂直平铺 no-repeat:不平铺
background-attachment: 设置背景图像是否固定或者随着页面的其余部分滚动。<br>
background-position: 属性设置背景图像的起始位置。
</h3>
</body>
</html>
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: 水平拉伸距离 垂直拉伸距离 清晰度 阴影颜色;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本属性设置--设置颜色</title>
<style>
#h41{color: red;}
#h42{color: red; text-align: center;}
.top{vertical-align: top;}
#h44{text-decoration:line-through;}
#h45{text-transform:capitalize;}
#h46{text-indent:50px;}
#h47{letter-spacing:30px;}
#h48{word-spacing:50px;}
p{line-height:50px}
#h49{text-shadow:6px 5px 3px red;}
</style>
</head>
<body>
<h4 id="h41">color:设置文字的颜色</h4>
<h4 id="h42">text-align:设置文本的水平对齐方式[居中或对齐到左或右,两端对齐]</h4>
<h4>vertical-align:设置一个元素的垂直对齐方式</h4>
<p>一个<img class="top" src="imgs/ca0656f537b47348c84d394404de176.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>
</html>
