引入方式
根据css在HTML文档中的使用方法和作用范围不同,在HTML中使用CSS样式有四种方法.分别是:内联样式(行内样式)、内部样式表（内嵌样式）、外部样式表（链接外部样式）、导入外部样式。
内联样式：
混合在HTML标记里使用，可以很简单的对某个标签元素单独定义样式。
<标记名 style="样式属性:样式属性值;样式属性:样式属性值:...></标记名>
只作用于该标签及该标签包裹的内容上,仅对当前HTML标签起作用,并且写在HTML标签内部,这种使用方式不能使内容与表现相分离本质上没有体现出CSS的优势.
内部样式表:
在HTML中通过<style>标签引入CSS样式.<style>标签用于位HTML文档定义样式信息.<style>标签位于head标签中,规定浏览器中如何呈现HTML文档.在<style>标签中type属性是必需的,它用来定义<style>元素的内容,唯一值是"text/css".
内部样式只对所在的网页有效,是一种比较常用的方法.
<style type="text/css"> 选择符1{样式属性:样式属性值;样式属性:样式属性值;...} ... </style>
<style>标签里的选择器尽量按照HTML代码的结构从上到下,从外向内的结构进行编写.
链接外部样式:
把CSS代码保存为一个单独的样式表文件,文件扩展名为".css"在页面中引用外部样式表即可
在HTML页面中使用`link/`标签链接外部样式表,这个`link`标签必须放到页面的`head`标签内.
<head>
...
<link href="style.css" rel="stylesheet" type="text/css"/>
...
</head>
rel=“stylesheet” 用来定义链接的文件与HTML之间的关系,stylesheet值表示指定一个固定或首选的样式.type="text/css"指文件的类型是样式表文本.href="style.css"是文件所在的位置,可以是相对位置也可以是绝对位置.
外部样式表实现了样式和结构的彻底分离,一个外部样式表文件可以适用于多个页面.当改变这个样式文件时,所有页面的样式都会随之改变.在制作大量相同样式页面的网站时,非常有用,不仅减少了重复的工作量.利于保持网站的统一样式和网站维护,同时用户在浏览页面时也减少了重复下载代码,提高了网站速度.
导入外部样式:
与链接外部样式的功能基本相同,都是使用外部样式表文件,只是在语法运行方式上稍有区别.在HTML文件初始化时被导入HTML文件内作为文件的一部分,类似于内嵌;样式的效果,导入外部样式采用import方式导入样式表,它的格式要写到 <style>双标签内.
<style>
@ import url("样式表路径");
<style>
基础语法
CSS规则由两部分构成,即选择器和声明.声明必须放在大括号{ }中,并且声明可以时一条或多条多句,每条声明由一个属性和值组成,属性和值用冒号分开,每条语句以英文分号结尾.
选择器{
属性1:值1;
...
属性N:值N;
}
选择器是指大括号内的这组样式代码针对的对象,即针对那些页面元素进行设置,可以是HTML元素,也可是元素的属性.
css的使用方式就是首先指定对什么选择器进行设置,然后指定对什么选择器进行设置,然后指定对该对象上的哪些方面的属性进行设置,最后给出该设置的属性值.
选择器及分类
在CSS3中,有几种不同类型的选择器:元素选择器、关系选择器、属性选择器、伪类选择器、伪对象选择器等，元素选择器时最基本也最常用的选择器之一，元素选择器包括标记选择器、通用选择器、类选择器、ID选择器。
标记选择器（标签选择器）：
一个HTML由很多的标签组成，CSS标签选择器就是用来声明这些标签的。每种HTML标签的名称都可以作为相应的标签选择器的名称。
通用选择器：
一种特殊的选择器，用“*”符号表示，对所有元素都生效，是一个比较容易使用并且容易忽略的选择器
ID选择器：
为带有指定ID的元素设置样式，允许以一种独立于文档元素的方式来指定样式。所有主流浏览器都支持ID选择器。
使用“#”前缀标识符进行标识，后面紧跟指定的元素的ID名称。元素的ID名称是唯一的，只能对应于文档中一个具体的元素。ID选择器名称可以由
用户自定义。标记名#ID名{ 属性1:值1；属性2：值2；...}ID名可以是任何合法的字符(第一个字符不能为数字)
类选择器:
与ID选择器相似,不同的是定义时不使用"#“而使用”."引用时不使用ID属性而使用class属性,标记器一旦使用,那么页面中所有用到该元素的地方都会发生相应变化.标记名.类名{ 属性1:值1；属性2：值2；...}
ID选择器和类选择器都可以省略标记名不写
属性选择器:
主要作用就是对带有指定属性的HTML元素设置样式.可以根据元素的属性及属性值来选择元素。*[title] {color:red;}
后代选择器:
可以选择作为某元素后代的元素.我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”，但是要求必须从右向左读选择器。书写方法:把外层的标记写在前面,内层的标记写在后面,之间用空格分隔,当标记发生嵌套时,内层的标记就成为外层标记的后代了.影响不仅限于元素的"直接后代",而且还会影响到它的"各级后代".基础语法:E1 E2{属性1:属性值1;属性2:属性值2:...}
子选择器:
只能选择作为某元素的子元素.如果你不希望选择任意后代元素,而是希望缩小范围,只选择某个元素的子元素时使用.子选择器使用了大于号(子结合符).子结合符两边可以有空白符,这是可选的.基础语法:E > F{属性1:属性值1;属性2:属性值2:...}
相邻选择器:
基础语法:E+F{属性1:属性值1;属性2:属性值2:...}选择紧接在另一个元素后的元素，而且二者有相同的父元素.
伪类选择器:
可以对超链接在不同状态下定一不同的样式效果.基础语法:选择符:伪类{属性1:属性值1;属性2:属性值2:...}
伪类和类不同,是CSS定义好的,不能像类选择符一样随意用别的名字,常用伪类选择器:": link" 未访问的链接 “: visited” 已访问的链接 “: hover” 鼠标移动到链接上 “: active” 已被激活的元素 。
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。伪类名称对大小写不敏感。
伪元素选择器：
不是针对真正的元素对象使用的选择器，而是针对CSS中已经定义好的伪元素而使用的选择器。基础语法:选择符:伪元素{属性1:属性值1;属性2:属性值2:...}
主要有以下几个伪元素选择器。“
:first-letter"向文本的第一个字母添加特殊样式,仅作用于块对象.
“:first-line"向文本首行添加特殊样式,仅作用于块对象.
":before"和content属性一起使用,在元素之前添加内容.
":after"和content属性一起使用,在元素之后添加内容.
":selection"设置对象被选择时的样式.
一般将伪元素选择器前面的单个冒号改为双冒号,用于区分伪类选择器,但浏览器仍支持单冒号写法.
选择器分组:选择器之间用英文逗号分隔,逗号告诉浏览器规则中包含两个不同的选择器.
选择器优先级
-
根据选择器类型从低到高排列:
元素选择器(标签)和伪元素选择器
类选择器、属性选择器和伪类选择器
ID选择器 -
根据引入方式从低到高排列:
外部样式
内部样式
内联样式 -
内联样式>内部样式表>外部样式表,即"就近原则".如果同一个选择器中样式声明重叠,那么后写的会覆盖先写的样式,即后写的样式优先于先写的样式.
-
! important(权重属性),它没有特殊性值,但它是优先级最高的.
CSS单位
1、尺寸单位;相对长度单位、绝对长度单位。
- 字体相对长度单位：em、ex、ch、rem;
- 视窗相对长度：vw、vh、vmin、vmax；
- 绝对长度单位是固定尺寸，采用的是物理度量单位：cm、mm、in、px、pt、pc;实际应用中我们广泛使用是em、rem、px、及%（相对于父元素的百分比值）来度量页面元素的尺寸。
- 1em 等于当前的字体尺寸。2em 等于当前字体尺寸的两倍。
2、颜色单位
- (颜色名) 颜色名称 (比如 red)
- rgb(x,x,x) RGB 值 (比如 rgb(255,0,0))
- rgb(x%, x%, x%) RGB 百分比值 (比如 rgb(100%,0%,0%))
- #rrggbb 十六进制数 (比如 #ff0000)
网页基础样式添加
1、背景(背景色、背景图（平铺、滚动、底纹）
- 背景色background-color
- transparent:透明
- background-image:背景图片(url:背景图片地址)
- background-repeat:背景图平铺
属性值：repeat:沿水平和垂直两个方向平铺
no-repeat:不平铺
repeat-x:水平方向平铺
repeat-v:垂直方向平铺
round:自动缩放直到适应填充满整个容器
space:以相同的间距平铺,并填满整个容器或某个方向 - background-attachment:背景图像滚动
属性值：scroll:随着页面的滚动轴背景图片会移动
fixed:随着页面滚动轴背景图片不会移动
inherit:他的父元素 - background-position:背景图定位（垂直方向(top/center/bottom)和水平方向(left/center/right)(00:左上角)(垂直:顶部/居中/底部)(水平:居左/居中/居右)
- background_size:控制背景图片大小
- background:背景复合属性(其属性值可以有一个或者多个值组成,值之间使用空格隔开,属性值之间没有顺序要求.)
2、文本(颜色、对齐方式、水平、垂直、缩进、行高、文本装饰）
- color:控制文本颜色
- text_align:控制文本的对齐方式(水平方向:左右中)
justify:两端对其文本效果 - text_indent:文本缩进(1em一个字符的距离)
- line-height:行高
- vertical-align:垂直对齐
- 当元素的高和行高一样时元素的内容就会在垂直方向上居中
- text-decoration:文本装饰
none:默认值,定义的标准文本
underline:文本下划线
overline:文本上划线
line-through:删除线
blink:文本闪烁
3、字体（类型、大小、风格、粗细）
- Font-family:设置字体类型
- Font-size:设置字体大小
- Font-style:设置字体风格
- Font-weight:设置字体粗细(100~900)400为默认值700为粗体
- Font:字体复合属性
4、超链接样式
- 链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态：
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
5、列表
- 列表:list-style-type
none:无标记符号
disc:实心圆
cricle:空心圆
square:实心正方形
decimal:数字 - list-style-image:项目符号换为图片
- list-style-position列表位置
inside表示项目标记放置在文本以内，且环绕文本根据标记对齐；
outside默认值，保持标记位于文本的左侧，列表项标记放置在文本以外，且环绕文本不根据标记对齐。 - list-style：列表综合设置
6、表格
- border-collapse属性
separate:默认值，边框会分开；
collapse：合并边框；
inherit：继承父元素属性值 - border-spacing:边框之间的距离
inherit：继承父元素属性值 - empty-cells:是否显示表格中的空单元格
hide：不在空单元格周围绘制边框；
show：在空单元格周围绘制边框；
inherit：继承父元素属性值 - table-layout:显示表格单元格、行、列的算法规则。
automatic：默认，列宽度由单元格内容设定；
fixed：列宽由表格宽度和列宽度设定；
inherit：继承父元素属性值 - caption-side:设置表格标题的位置
top:默认值，表格标题定位在表格之上；
buttom:表格标题定为在表格之下；
inherit：继承父元素属性值
网页布局
1.DIV进阶(盒子模型)
在html标签中,任何一个标签都是盒子模型.css盒子模型涉及为各个元素调整外边距(margin)、边框(border)、内边距(padding)和内容(content)的宽(width)和高(height)
①边框(border):围绕元素内容和内边距的一条或多条线.
②内边距(padding)：边框的内部，内容与边框的距离.
③外边距(margin)：位于边框外部，边框外面周围的间隙，标签与标签之间的距离.
④border、padding、margin都有上下左右四个方向，每个方向的设置可以相同可以不同
⑤不加top（上）、bottom（下）、left（左）、right（右），border、padding、margin当只有一个值时，上下左右值一样。两个值时，第一个值水平方向，第二个值垂直方向。四个值时上右下左顺时针方向。
⑥margin:当只有两个值时,第二个值可以为auto(自动适应),但是必须给标签加上宽度.
- 给元素设置的宽高是内容区的宽高.
- 在标签盒子模型下:元素的宽=外边距的宽(左右)+边框的宽(左右)+内边距的宽(左右)+内容区的宽;
元素的高=外边距的高(上下)+边框的高(上下)+内边距的高(上下)+内容区的高 - 在怪异盒子模型下:元素的宽=外边距的宽(左右)+设置的宽(内容区的宽+内边距的宽(左右)+边框的宽(左右)
元素的高=外边距的高(上下)+设置的高(内容区的高+内边距的高(上下)+边框的高(上下) - box-sizing(设置盒子模型):content-box(标准盒子模型(W3C标准的盒子模型)/border-box(怪异盒子模型(ie盒子模型)
- border-radius:圆角边框(边框的弯曲程度px)
2.边框
1.border-width:边框的粗细
2.border-style:边框的样式
- solid:实线
- dotted:虚线
- double:双实线
3.border-color_边框的颜色
4.border-(top/right/bottom/left):添加元素上、右、下、左边的边框
5.outline(轮廓):给元素添加一层轮廓,起到突出元素的作用.也有宽度outline-width,样式outline-style,颜色outline-color三种属性
一般用px做单位的都可以用百分比做单位
布局与定位
css有三种基本定位机制,分别是标准流、浮动流、绝对位置
定位属性：position
浮动属性：float
一.定位属性
定位属性position
用来设置元素的位置，值它相对于父级的位置和它相对它自身应该在的位置
- static：静态定位，所有元素定位的默认值
- relative：相对定位,基准位置为其正常应该所在的位置,通常配合top、bottom、right、left属性使用。
- absolute:绝对定位,设置绝对定位的元素会脱离文档流.(没有参照物时,以浏览器为参照物,如:
left:100px ;离浏览器左侧100px的距离.有参照物时,首先设置参照物,一般在父元素里设置参照物,设置position样式值不为static的样式的任意一种样式(absolute,fiexed,relative)常用的是relative,原因是relative不脱离文档流.relative此时起到参照物的作用. - fixed:固定定位,使用top、bottom、right、left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动条滚动.对象脱离文档流。
- 在定位中,通常配合top、bottom、right、left属性使用。top表示顶部边缘向下的偏移.bottom表示底部向上偏移,right表示右侧向左偏移,left表示左侧向右偏移.
脱离文档流:元素不在自己本身的位置上
二.浮动属性
浮动属性：float 属性实现元素的浮动
使用时float属性的元素会对覆盖其它元素,其覆盖的区域不可见,使用该属性可以实现内容的环绕效果.
使用浮动时,谁需要浮动就写在谁里面,使用浮动的元素会脱离文档流,从而导致页面布局混乱,所以需要清除浮动
浮动清除
clear 属性:clear 属性用于清除元素的浮动,值可以是 left、right、both 或 none，它表示框的哪个边不允许有浮动元素.
方式一(不推荐使用):使用空标签清除浮动,在最后一个子元素下再添加一个空元素,并设置CSS属性:clear:both
方式二(不推荐使用):在父元素上添加CSS属性,overflow:hidden:zoom:1;
方式三(推荐使用):使用after清除浮动,
content:" ";
visibility:hidden;
display:block;
height:0;
clear:both;
zoom:1
谁浮动样式就写在谁的父元素上.
overflow:解决文本击穿
(hidden:元素区内容超出边框时,超出的部分隐藏);
(scroll:元素内容区超出内容边框时元素出现滚动条.水平和垂直方向);
(auto元素内容区超出边框时,元素仅在水平方向出现滚动条).
display:inline-block把元素性质改为行内块
display:block把元素改为块级标签
display:inline改为行内块标签
1273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
