我终于来更新了,最近写APP策划要死了;
目录
1.了解CSS的作用和优点;
- 更多排版和页面布局控制:可控制字号、行间距、字间距、缩进、边距以及定位;
- 样式和结构分离:页面种使用的文本歌是和颜色可独立于网页主体(body部分)进行配置和存储;
- 样式可以存储:CSS允许将样式存储到单独的文档中并将其与网页关联。修改样式可以不用修改网页代码。
- 文档变得更小:由于歌是从文档中分离出来,因此实际文档会变得更小。
- 网站维护变得更容易:要是修改样式,修改样式表CSS系列就可以了。
配置css的方法:
- 内联样式:内联样式是指将代码直接写入网页的主体区域,作为HTML标签属性。只适合提供样式属性的特定元素。
- 嵌入样式:嵌入样式再网页的页头区域(<head></head>)进行定义。应用与整个网页文档。
- 外部样式:外部样式用单独文件编码。网页在页头区域使用link元素链接到文件。
- 导入样式:导入样式与外部样式相似,同样是将包含了样式定义的文本文件与网页文档链接。但是没用#import指令将尾部样式表导入嵌入样式,或导入另一个尾部样式表;
CSS语法基础:
- 样式表由规则构成,这些规则吗,描述了要应用的样式。每一条规则都包含一个选择符和一个声明 ;
- CSS样式规则选择符可以是HTML元素的名称、类名或者id;
- CSS样式规则声明是指你要设置的CSS属性极其值;
2.用CSS在网页上配置颜色;
background-color属性:配置元素背景颜色;
以下样式规则将网页背景配置成黄色:
<style> body{background-color: yellow;} </style>
结果:
color属性:用于配置元素的文本颜色;
以下是CSS样式规则将网页上的文本的颜色变成蓝色;
结果:
配置背景颜色和文本色时;一个选择符要配置多个属性时,用分号(;)分隔不同的声明。
以下是CSS样式配置网页为黄底蓝字:
<style> body{color: blue; background-color: yellow; } </style>
CSS颜色语法:
CSS语法允许通过多种方式配置颜色:
- 颜色的英文名称(英文);
p {color:red}
- 十六进制颜色值: ‘#’ +六位十六进制 eg:#FF0000;
-
p{color:#FF0000}
- 十六进制短颜色值:‘#’+三位十六进制 eg: #F00;
-
p{color:#F00}
- 十进制颜色值 : eg: rgb(225,0,0);
p{color:rgb(255, 0, 0)}
- CSS3新增的HSL颜色值:色调/饱和度/亮度 eg:hsl(0, 100%, 50%);
p{color:hsl(0, 100%, 50%);}
CSS3 Color Modle不仅允许配置颜色,还允许配置颜色的透明度,这是使用RGBA(Red, Blue, Alpha)实现的.CSS3新增的还有HSLA(Hue, Saturation,Lightness, Alpha)颜色、opacity属性以及CSS渐变背景。
3.配置内联样式;
内联样式通过HTML标记的style属性来实现。属性值是样式规则声明。每个声明都是由属性和值构成 ;属性和值以冒号隔开。
以下是将<h1>标题文本设为红色,将背景设为灰色:
<h1 style="color:red; background-color: #cccccc;">这是标题1</h1>
结果:
内联样式不常用。它效率不高,会为网页文档带来额外的代码,而且不便于维护。但内联样式在某些情况下好用,比如通过内容管理系统或博客发表一篇文章,并需要对默认样式进行少许调整,从而更好的表达自己的想法。
4.配置嵌入式样表;
嵌入样式应用与整个网页文档,这种样式要放到网页Head部分的<style>元素中。使用XHTML语法时<style>标记要求定义一个type属性。要向该属性赋值“text/css”来指定CSS MINE类型。HTML5语法中不需要type属性。
以下时用嵌入式来设置文本背景颜色和网页文本颜色:
<style> body{background-color: deepskyblue; color:palevioletred;} </style>
结果:
嵌入式的优点:所有样式都位于网页的同一个位置,所以它比内联样式更容易维护。并且只需要为<h2>选择符进行一次样式编码,两个<h2>都会运用这个样式。
缺点:很少会有网站只有一个网页。在每个网页的Hesd部分重复编码CSS同样时无效率和难以维护的。
5.配置外部样式表;
外部样式表时包含CSS样式规则的文本文件,使用.css扩展名。这种.css文件通过link元素与网页关联。因此,多个网页可关联同一个.css文件。.css文件不包含任何HTML标记,它只包含CSS样式规则;
外部CSS的优点:只需要在一个文件中配置样式。这意味着以后维护和修改会更加方便。
link元素:
link元素将外部样式表与网页关联,位于网页Head部分。时独立标记(void标记)。link元素由三个属性:rel、href和type;
1.rel属性的值是“stylesheet”;
2.href属性的值是.css文件名;
3.type属性的值是“text/css”。 这是CSS 的MINE类型。type属性在HTML5中可选,在XHTML中必需。
eg:用link元素将css文件夹中的learn.css文件外联到index.html网页文件:
<!--index.html文件中的head部分--> <head> <title>Paragraph Example</title> <meta charset="utf-8" /> <link rel="stylesheet" href="css/learn.css" > </head>
<!--learn.css文件中的内容被外联--> body{ background-color: gray; color:blue; }
结果:
6.CSS的class、ID和后代选择符
class选择符
class选择符配置某一类CSS规则,并将其应用与网页的一个或多个区域。配置一类样式时,要将选择符配置成类名。在类名前面添加句点符号(.)。类名必须以字母开头,可包含数字、连字符和下划线。不能有空格。
eg:将网页文本的段落文本的文字设置成红色:
.p{color:red}
eg:也可以设计一个不是标识符的类名,然后样这个样式运用于你想运用的元素里:
.eg{color:blue;}
一类样式应用与任何元素。这是使用class属性来做到的,例如class="eg'。 注意这时不要在类名前面添加句点。
eg:在<li>元素中运用eg类:
<li class="eg">我是测试</li>
ID选择符
用id选择符向网页上的单个区域应用独特的CSS规则。class选择符可与在网页上多次应用,而id在每个网页上只能应用一次。为某个id配置属性样式时,要在id名称前添加#符号。id名称可以包含字母、数字、连字号和下划线。id名称不能有空格。
eg:在learn.css文件配置名为estart的id:
#estart {color:blue;}
使用id属性,即id=“estart”,可用于所有你想运用的元素
eg:将id为estart运用于<div>中:
<div id="estart">这是一个测试呐</div>
后代选择符
后代选择符在容器(父)元素的上下文中配置一个元素。它允许为网页上的特定区域配置CSS,同时减少class和id的数量。先列出容器选择符(可以是元素选择符、class、id),再列出要配置样式的选择符。
eg:nav中的<h2>配置成绿色:
nav h2{color:#00ff00}
为了获得最大的兼容性,要慎重选择class和id名称。随着越来越熟悉CSS,会逐渐体会到后代选择符的强大和高效,可以它配置特定上下文中的元素,同时不需要再HTML代码中编写额外的class或者id。
span元素
<span>元素再网页中定义一个上下不留空格的内敛区域。适合格式化一个包含在其他区域(比如<p>, <blockquote> , <div>)中的区域。
正常书写<h1>和<nav>的结果:
在加入<sapn>元素以后 在CSS元素中添加margin-bottom:0 (边距的意思)之后:
<h1><span class="companyname"> Trillium Media Design</span></h1>
<nav>
<b>
<a href="home.html">Home</a>
<a href="services.html">Services</a>
<a href="contast.html">Contact</a>
</b>
</nav>
h1{
background-color: #191970;
color: #E6E6FA;
margin-bottom: 0;
}
7.理解CSSD优先顺序;
- 较局部的样式规则优先与较全局的元素(比如p和div);
- 离要设计的元素越紧的样式优先级越高:
HTML属性 》 内联样式 》 嵌入式样式 》 外部样式 》 浏览器默认值