什么是 CSS?：
1.css是指层叠样式表(Cascading Style Sheets)
2.样式定义如何显示HTML元素
3.样式通常存在样式表中
4.把样式添加到HTML4.0中，是为了解决内与表现分离的问题
5.外部样式表可以极大提高工作效率
6.外部样式表通常存储在css文件中
7.多个样式定义可层叠为一
样式解决了一个很大的问题：
HTML标签原本被设计为用于定义文档内容，如下实例：
h1>这是一个标题</h1>
<p>这是一个段落。</p>
样式定义如何显示HTML元素，就像HTML3.20的字体标签和元素属性所起的作用那样。样式通常保存在外部的.css文件中，通过编辑一个简单的css文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
为了解决这个问题，万维联盟(W3C),这个非常营利的标准化联盟，肩负起了HTML标准化的使命，并在HTML4.0之外创造出样式（Style）
当代浏览器都支持CSS
CSS样式表极大提高了工作效率
样式表定义如何显示 HTML 元素
样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
CSS语法：
实例：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>css语法</title> <style> body{background-color: yellow;} h1{font-size: 30pt} h2{color:blue;} p{margin-left: 50px;} </style> </head> <body> <h1>This header is 36 pt</h1> <h2>This header is blue</h2> <p>This paragraph has a left margin of 50 pixels</p> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>css语法</title> <style> body{background-color: tan;} h1{color:maroon;font-size: 20pt;} hr{color: navy;} p{font-size: 11pt;margin-left: 15px;} a:link{color: green;} a:visited{color:yellow;} a:hover{color: black;} a:active{color: blue;} </style> </head> <body> <h1>This is a header 1</h1> <hr/> <p>You can see that the style sheet formats the text</p> <p><a href="http://www.w3cschool.cc" target="_blank">This is a link</a></p> </body> </html>
CSS实例：
CSS规则有两个主要的部分构成:选择器 以及一条或者多条声明
选择器通常是由你需要改变样式HTML元素
每条声明由一个属性和一个值组成
属性（Property）是你希望设置的样式属性（style attribute） 每个属性有一个值 属性和值被冒号隔开
CSS实例：
CSS声明总是以分号（；）结束，声明组以大括号（{}）括起来
p {color:red;text-align:center;}
为了让CSS可读性更强，你可以每行只描述一个属性:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>css样式</title> <style> p{ color: red; text-align: center; } </style> </head> <body> <p>Hello World!</p> <p>这个段落采用CSS样式化</p> </body> </html>CSS注释：
注释是用来注释你的代码，并且可以随意编辑它，浏览器会忽视它
CSS注释以“/*”开始，以“*/”结束。实例如下:
/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}
选择器：
1.标签选择器：作用于当前页面所有匹配标签
2.类选择器：作用于当前页面所有class值为red的标签
3.id选择器：id在当前页面具有唯一性
代码示例：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <style> li{/*标签选择器:作用于当前页面所有匹配标签*/ color: blue; } .red{/*类选择器:作用用当前页面所有class值为red的标签*/ color:red; } #firstLine{/*id选择器:id在当前页面具有唯一性*/ color:red; } </style> <title>CSS标签选择器</title> </head> <body> <ul> <!--通常标签选择器来实现样式--> <!--通过类选择器来实现样式--> <li>家用电器</li> <li class="red">各类书籍</li> <li>手机数码</li> <li class="red">日用百货</li> </ul> <ol> <!--id具有唯一性--> <li id="firstLine">aaaa</li> <li>bbbb</li> <li>cccc</li> <li>dddd</li> </ol> </body> </html>样式的优先级：
行内样式的优先级比内部样式高
内部样式的优先级比外部样式高
以上效果的实现要符合“就近原则”
CSS创建
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。
如何插入样式表：
插入样式表的有三种：
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
-
- 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来来改变整个站点的外观。
- 每个页面使用<link>标签链接到样式表。<link>标签在（文档的）头部:
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
hr
{
color:
sienna
;
}
p
{
margin-left:
20
px
;
}
body
{
background-image:
url
("/
images
/
back40
.
gif
")
;
}
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
<head><style>hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style></head>
内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
<pstyle="color:sienna;margin-left:20px">这是一个段落。</p>
多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对 h3 选择器的三个属性：
h3
{
color:
red
;
text-align:
left
;
font-size:
8
pt
;
}
而内部样式表拥有针对 h3 选择器的两个属性：
h3
{
text-align:
right
;
font-size:
20
pt
;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color
:red
;
text-align
:right
;
font-size
:20
pt
;
即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
多重样式优先级
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
一般情况下，优先级如下：
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
<
head
>
<!--
外部样式 style.css
-->
<
link
rel
=
"
stylesheet
"
type
=
"
text/css
"
href
=
"
style.css
"
/>
<!--
设置：h3{color:blue;}
-->
<
style
type
=
"
text/css
"
>
/* 内部样式 */ h3{color:green;}
</
style
>
</
head
>
<
body
>
<
h3
>
测试！
</
h3
>
</
body
>
外部样式：注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
span{ color: red; font-size: 20px; }
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>嵌入式css样式</title> <link rel="stylesheet" href="css/style.css" type="text/css"/> </head> <body> <p> xx网，<span>超酷的互联网</span>，IT技术免费学习平台，创新的网络一站式学习，实战体验； <span>服务及时贴心</span>，内容专业，<span>有趣易学</span>。专注服务互联网络工程快速成为技术高手！ </p> </body> </html>内部样式：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>嵌入式css样式</title> <style type="text/css"> span{ color: blue; font-size: 20px; } </style> </head> <body> <p> xx网，<span>超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心</span>， 内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手！ </p> </body> </html>背景颜色：
CSS 背景属性用于定义HTML元素的背景。
CSS 属性定义背景效果:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
背景颜色
background-color 属性定义了元素的背景颜色.
页面的背景颜色使用在body的选择器中:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>认识html标签</title> <style> body{ background-color: lime; } </style> </head> <body> <h1>我的css web页!</h1> <p>I have a car</p> </body> </html>
CSS中，颜色值通常以以下方式定义:
- 十六进制 - 如："#ff0000"
- RGB - 如："rgb(255,0,0)"
- 颜色名称 - 如："red"
以下实例中, h1, p, 和 div 元素拥有不同的背景颜色:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>css背景颜色</title> <style> h1{ background-color: #FF0000; } p{ background-color: blue; } div{ background-color: antiquewhite; } </style> </head> <body> <h1>I have a car</h1> <div> 该文本插入在div元素中。 <p>该段落有自己背景颜色</p> 我们仍然在同一个div中 </div> </body> </html>背景图像：
background-image 属性描述了元素的背景图像
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体
页面背景图片设置实例：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>css背景图像</title> <style> body{ background-image: url('image/tx.jpg'); background-color:yellow; } </style> </head> <body> <h1>I have a car</h1> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>css背景图像</title> <style> body{background-image: url("image/1.jpg")} </style> </head> <body> <h1>I have a car</h1> <p>该文本不容易被阅读</p> </body> </html>
背景图像 - 水平或垂直平铺
默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如下所示:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>css背景图像</title> <style> body{background-image: url('image/1.jpg')} </style> </head> <body> <h1>I have a car</h1> </body> </html>如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>css背景图像</title> <style> body{ background-image: url('image/1.jpg'); background-repeat: repeat-x; } </style> </head> <body> <h1>I have a car</h1> </body> </html>
背景图像- 设置定位与不平铺
让背景图像不影响文本的排版
如果你不想让图像平铺，你可以使用 background-repeat 属性:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>css背景图像</title> <style> body{ background-image: url("image/2.jpg"); background-repeat: no-repeat; } </style> </head> <body> <h1>I have a car</h1> <p>背景图片实例</p> <p>背景图片只显示一次，但它打扰着读者!</p> </body> </html>
以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。
可以利用 background-position 属性改变图像在背景中的位置:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>css背景图像</title> <style> body{ background-image: url("image/2.jpg"); background-repeat: no-repeat; background-position:right top; margin-right: 200px; } </style> </head> <body> <h1>I have a car</h1> <p>图片背景不重复，设置position实例</p> <p>背景图片只显示一次，并与文本分开!</p> <p>实例中还添加了margin-right 属性用于让文本与图片隔开</p> </body> </html>
背景- 简写属性
在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。
为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 "background":
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>css背景图像</title> <style> body{ background: #ffffff url("image/2.jpg") no-repeat right top; margin-right: 200px; } </style> </head> <body> <h1>I have a car</h1> <p>背景图片只显示一次 但它位置离文本比较远。</p> <p>在这个例子中我们添加了一个右边距，所有背景图像不会打扰到文本</p> </body> </html>
当使用简写属性时，属性值的顺序为：:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
以上属性无需全部使用，你可以按照页面的实际需要使用.
这个实例使用了先前介绍的CSS，你可以查看相应实例:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ background-image: url("image/2.jpg"); background-repeat: no-repeat; background-attachment: fixed; } </style> </head> <body> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> </body> </html>
CSS 背景属性
| Property | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 把图像设置为背景。 |
| background-position | 设置背景图像的起始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
CSS 文本格式
文本格式
This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the "尝试一下" link.
文本颜色：
颜色属性被用来设计文本的颜色
颜色是通过CSS最经常的指定：
- 十六进制值 - 如: ＃FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
<html>
<head>
<meta charset="utf-8">
<title>vip宅男</title>
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<p>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。</p>
<p class="ex">这是一个类为"ex"的段落。这个文本是蓝色的。</p>
</body>
</html>
文本的对其方式：
文本排列属性是用来设置文本的水平对齐方式
本文可以居中或对齐到左或右 两端对齐
当text-align设置为“justify” 每一行被展示为宽度相等 左右外边距是对齐（如杂志或报纸）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>文本的对齐方式</title> <style> h1{text-align: center;} .date{text-align: right;} .main{text-align:justify;} </style> </head> <body> <h1>CSS text-alig n实例</h1> <p class="date">2018年01月07号</p> <p class="main"> "当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家； 当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到： 如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。" </p> <p><b>注意:</b>重置浏览器窗口大小查看 "justify" 是如何工作的。</p> </body> </html>文本修饰：
text-decoration用来设置或删除文本的修饰 从设计的角度看text-decoration主要是用来删除链接的下划线
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>文本的修饰</title> <style> a{text-decoration: none} </style> </head> <body> <p>链接到:<a href="#"> vip宅男</a></p> </body> </html>
另外一种修饰：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>文本的修饰</title> <style> h1{text-decoration: overline;} h2{text-decoration: line-through;} h3{text-decoration: underline;} </style> </head> <body> <h1>I have a car1</h1> <h2>I have a car2</h2> <h3>I have a car3</h3> </body> </html>文本的转换：
文本转换属性是用来指定在一个文本中的大写和小写字母
可用于所有字句变成大写或者小写字母，或每个单子的首字母大写
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>文本的修饰</title> <style> .uppercase{text-transform: uppercase;} .lowercase{text-transform: lowercase;} .capitalize{text-transform: capitalize;} </style> </head> <body> <p class="uppercase">I have a car1</p> <p class="lowercase">I have a car1</p> <p class="capitalize">I have a car1</p> </body> </html>文本缩进：
文本缩进属性是用来指定文本的第一行的缩进：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>文本的缩进</title> <style> p{text-indent: 2em} </style> </head> <body> <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.' </p> </body> </html>指定字符之间的空间：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>指定字符之间的空间</title> <style> h1{letter-spacing: 30px;} h2{letter-spacing: -30px;} </style> </head> <body> <h1>I have a car1</h1> <h2>I have a car2</h2> </body> </html>指定行与行之间的空间：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>指定行与行之间的空间</title> <style> .small{line-height: 70%;} .big{line-height: 200%;} </style> </head> <body> <p> 这是一个标准行高的段落。<br/> 这是一个标准行高的段落。<br/> 大多数浏览器的默认行高约为110%至120%。<br/> </p> <p class="small"> 这是一个更小行高的段落。<br> 这是一个更小行高的段落。<br> 这是一个更小行高的段落。<br> 这是一个更小行高的段落。<br> </p> <p class="big"> 这是一个更大行高的段落。<br> 这是一个更大行高的段落。<br> 这是一个更大行高的段落。<br> 这是一个更大行高的段落。<br> </p> </body> </html>设置元素的文本方向：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>设置元素的文本方向</title> <style> .text{direction: rtl;} </style> </head> <body> <div>一些文本。默认书写方向</div> <div class="text">一些文本。从右到左的书写方向。</div> </body> </html>增加单词之间的空白空间：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>增加单词之间的空白空间</title> <style> p{letter-spacing: 30px;} </style> </head> <body> <p>I have a car</p> </body> </html>在元素内禁用文字环绕：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>在元素内禁用文字环绕</title> <style> p{white-space: nowrap;} </style> </head> <body> <p> 这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。 </p> </body> </html>垂直对齐图像：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>垂直对齐图像</title> <style> .bottom{vertical-align: bottom;} .top{vertical-align: top;} </style> </head> <body> <p><img src="image/hetao.jpg" alt="无此图片" width="270" height="50"/>默认对齐的图像</p> <p><img class="top" src="image/hetao.jpg" alt="无此图片" width="270" height="50"/>text-top 对齐的图像。</p> <p><img class="bottom" src="image/hetao.jpg" alt="无此图片" width="270" height="50"/>text-bottom 对齐的图像。</p> </body> </html>添加文本阴影：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>添加文本阴影</title> <style> h1{text-shadow: 2px 2px #ff0000;} </style> </head> <body> <h1>I have a car</h1> <p><b>注意:</b>Internet Explorer 9 以及更早的浏览器不支持 text-shadow 属性。</p> </body> </html>
所有CSS文本属性。
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 设置或返回文本是否被重写 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
扫一扫
236
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
