CSS简介
如今,HTML大楼已经建起来了,但是现在的大楼内部还是可怜的毛坯,我们需要专业的室内装修公司将我们的HTML大楼装修的漂亮一些。
CSS指层叠样式表(Cascading Style Sheets),定义如何显示HTML元素。
CSS规则由两个主要的部分构成:选择器,以及一条或多条声明:
h1 {color:blue; font-size:12px;}ssss
选择器通常是您需要改变样式的HTML元素。每条声明由一个属性和一个值组成。属性(property)希望设置的样式属性(style attribute)。
CSS的加载方式
1.引入外部文件
<link herf="outer.css" rel="stylesheet" type="text/css"></link>
HTML文档中使用<link>元素引入外部样式文件,引入外部样式文件应在<head>元素中增加<link>子元素。
2.导入外部样式单
<style type="text/css">
@import "../outer.css"
@import url('outer.css');</style>
导入外部样式表单需要在<style>元素中执行@import进行导入。
3.使用内部CSS样式
一般来说我们不建议使用内部CSS样式:
复用性小。
导致HTNL文件过大,会导致网络负载严重。
修改整站风格时,需要对每一个网页文件进行样式修改。
CSS样式规则和CSS加载的方式<style typr="text/css">样式单文件定义</style>
4.使用内联CSS样式
内联样式只对单个标签有效,不会影响整个文件。
在HTML元素中使用style属性定义内联样式。
<div style=“property1:value1;property2:value2;"/>
内联元素和区块元素
区块元素
总是在新的一行上显示。
高度、行高、宽度、内边距、外边距等都是了控制的。
高度默认为0,是根据元素内的内容而决定的,宽度是父元素的宽度,但是可以通过CSS控制它,显示的指定他的宽度和高度,可以利用浮动和定位来将他与其他的块元素也显示在一行上。实例:
<h1><p><ul><table>
内联元素
内联元素和其他元素显示在一行上。
上下边距、高度,宽度都是不可改变的,他的宽度是根据他的显示文本和图像的宽度。实例:
<b><td><a><img>
<div>元素
<div>元素是块级元素,它可以用于组合其他HTML元素的容器。
<div>元素没有特定的含义。由于它属于块级元素,浏览器会在其前后显示换行。
如果与CSS一同使用,<div>元素可用于对大的内容设置样式属性。
<span>元素
HTML<span>元素是内联元素,可用作文本的容器<span>元素也没有特定的含义。
当与CSS一同使用时,<span>元素可用于为部分文本设置样式属性。
选择器
通配符选择器
使用''*"表示通配符,用来选择页面所有元素的样式。
*{margin:0;
padding:0;}
类选择器
类选择器指定的样式对指定class属性的元素起作用。使用”."标识一个类选择符,类名可以任意。
.myclass{...}
ID选择器
ID选择器中的样式会对具体有指定id属性的HTML元素起作用。
HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义。
包含选择器
包含选择器用于指定处于某个选择器对应的内部元素。h1 em{color:res;}
子选择器
子选择器要求目标选择器必须作为外部选择器对应的元素的直接子元素。
群组选择器
群组选择器使用逗号对选择符进行分隔。(我们可以将逗号读成“和”)
h1,p,myClass,#man{font-size:20px}
伪类
CSS伪类是添加到选择器的关键字,指定要选择的元素的特殊状态。列如,:hover将在用户悬停在选择器指定的元素上时应用样式。
anchor伪类
链接的不同状态都可以以不同的方式显示。
注意:在CSS定义中,a:hover必须被置于a:link和a:visited之后,a:active必须被置于a:hover之后,才是有效的。伪类的名称不区分大小写。
first-child伪类
:first-child CSS伪类代表了一组兄弟元素中的第一个元素。被匹配的元素需要具备有一个父级元素。element:first-child{style properties}上面的CSS作用与下面的NTML:
span:first-child{background-color:lime;}<div><span>This span is limd!</span> <span>This span is not.:(</span></div>
first-line伪类
“first-line”伪元素用于向文本的首行设置特殊样式。
before伪类
“before”伪元素可以在元素的内容前面插入新内容。
CSS颜色
CSS的颜色可以通过以下方法指定:十六进制颜色,RGB颜色,RGBA颜色,颜色名等值指定。
十六进制颜色值
所有主要浏览器都支持十六进制颜色值。
RBG颜色值
RBG颜色值指定:RBG (红,绿,蓝)。每一个定义颜色的亮度,可在0和255之间,或一个百分比值(从0%到100%)之间的整数。
RBGA颜色值
RBGA颜色值指定:RBGA(红,绿,蓝,alpha)。Alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的参数。p{background-color:rgba(255,0,0,0.5);}
背景图片
背景颜色
brackground-color属性定义了元素的背景颜色页面的背景颜色使用在body的选择器中:body {background-color:#b0c4de;}
背景图片
background-image属性描述了元素的背景图像。默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体。background:url(img_flwr.gif);
背景平铺重复设置
background-repeat属性控制背景图像的平铺重复效果。
背景图片的固定
在默认情况下,组件里的背景图片会随着滚动条的滚动而自动滚动,我们要把background-attachment的属性设为fixed,那么背景图片就会被固定在该组件中,不会孙滚动条而移动。body{background-attachment:fixed;}
背景图片的定位
可以利用background-position属性改变图像在背景中的位置。
背景图片的大小
background-size属性指定背景图片大小。