1.什么是 CSS?CSS 指层叠样式表 (CascadingStyleSheets)。 它定义了如何显示HTML元素的样式【颜色\形状\尺寸.....】。HTML超文本标记语言是用来创建网页的内容。2.CSS的作用?给网页[html]的元素/标记/标签设置样式的,以让HTML网页变得好看。 为了解决内容【[html]的元素】与表现【样式】分离的问题3.在HTML网页中如何使用CSS?1）内联定义 (Inline Styles）在html开始标记中通过style...
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
最低0.47元/天 解锁文章
548
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
