CSS技术特点重点知识归纳总结
1 CSS 入门
CSS是层叠样式表(Cascading Style Sheets):用来定义网页的显示效果。
作用:把样式添加到HTML中,为了将网页内容与显示相分离。
可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的现实效果功能。
一个HTML元素可以被不同位置的样式进行修饰,多个样式根据一定规则层叠为一个。
div与span的区别:
相同点:都是空元素,即占位符。(空元素:就是单独在页面上插入此元素,不会对页面产
生影响的元素;都能处理任意大小的片断;都没有对标签内的内容进行任何格式化
渲染,主要用于应用样式表。)
不同点:DIV是块元素,可自动换行。(块元素:以另起一行开始渲染的元素)
SPAN是行内元素(也译作内嵌元素) ,不能自动换行。(行内元素:不需另起一行)
注:通过display:block可以使任意元素变成块元素
小结:
块级标签:div h1-h6 dl ol ul li table tr
行内标签:span font a td input
2 CSS与HTML的结合方式
2.1 内部关联
内联样式、style属性的方式:利用标签中style属性来改变每个标签的显示样式。
即在stytle 属性中写css代码。
如:<div style="css代码">黑马</div>
<pstyle="background-color:#FF0000;color:#FFFFFF">
p标签段落内容。
</p>
特点:该方式比较灵活,但是对于多个相同标签的同一样式定义比较麻烦,适合局部修改。
2.2 内嵌的方式
内嵌方式:在head标签中加入style标签,在style标签中书写css代码。对多个标签进行统一修改。
格式:
<head>
<style type=”text/css”>
/* 注释 */
p { color:#FF0000;}
</style>
</head>
特点:该方式可以对页面的样式进行统一设置,但对于局部不够灵活。
如果多个页面样式相同,代码也不复用。
2.3 链接外部样式表
通过head标签中link标签来实现,前提也是先要有一个已定好的CSS文件。
格式:<linkrel="stylesheet" type="text/css" href="url" />
例:
<linkrel="stylesheet" type="text/css" href="css_3.css"/>
<linkrel="stylesheet" type="text/css"href="http://www.itheima.com/css_3.css" />
注:可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。
也可以用来联接互联网上的样式文件。
2.4 CSS样式引用优先级
1 内联样式(在 HTML 元素内部style属性)
2 内嵌样式表(位于 <style> 标签内部)
3 外部样式表(用<link 联接外部样式表)
4 浏览器缺省设置
样式引用优先级: 1> 2 > 3 > 4
优先级总结:由下到上,由外到内。优先级由低到高。
3 CSS选择器
3.1 标签名选择器
标签名选择器:CSS通过标签名称设置样式——定义通用属性
例如:
body{
color: blue;
}
3.2 类选择器
class选择器:选择器的名称需要. 开头,名称应用在标签的的class属性中——类别区分
例如:
css样式
.hello { ...}
html代码
<h1 class="hello"> ... </h1>
特点:可以让不同的标签显示相同的效果,也可以让相同的标签显示不同的效果。
3.3 ID选择器
id选择器:选择器的名称需要 # 开头,名称应用在标签的id属性中——针对元素
例如:
css样式
#itcast { ... }
html代码
<span id="itcast"> ... </span>
3.4 选择器扩展
1 派生选择器----->层层递进关系,更深入
派生选择器:依据元素在其位置的上下文关系来定义样式。
上下文关系及父子标签,使用空格分隔
通过合理地使用派生选择器,我们可以使 HTML 代码变得更加整洁
例如:
html代码
<ul>
<li>
css样式
ul li { ...} 给标签<ul>下面的<li>标签设置样式
2 组合选择器----->并列关系
组合选择器:对多个不同选择器使用相同样式
例如:
css样式
p,div { color:#FF0000;}
html代码
<p>P标签显示段落。</p>
<div>DIV标签显示段落</div>
注:多个不同选择器要用逗号分隔开。
3 伪元素选择器
伪元素选择器:其实就在html中预先定义好的一些选择器。称为伪元素。是因为CSS的术语。主要针对a标签。
格式:标签名:伪元素。类名|标签名:伪元素。都可以。
a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态(未点击)。
a:active 点击超链接时的状态。
使用顺序 L – V – H – A
值得一提: 伪元素 :hover 在css1中只对a标签有效,在css2中对所有标签有效。
4 CSS样式属性
4.1 字体
font 简写属性。作用是把所有针对字体的属性设置在一个声明中
格式:{font : 风格 异体 粗细 尺寸/行间距字体系列}
例如:
p { font: italicsmall-caps bolder 12px/18px 宋体; }
按顺序设置如下属性:
font-style 风格(italic斜体、oblique 倾斜)
font-variant 异体
font-weight 粗细
font-size/line-height 尺寸/行间距
font-family 字体系列
4.2 文本
通过文本属性,可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进等。
<1> color设置文本颜色
值:①颜色名称:red ②十六进制颜色:#FF9900 ③RGB代码:color :rgb(0,100,255);
<2> text-align元素中的文本的水平对齐方式
值:①left ②right ③center ④justify 两端对齐
<3> text-decoration向文本添加修饰
值:①none 默认 ②underline③overline ④line-through ⑤blink
<4> direction设置文本方向
值:①ltr 默认 (Left-to-right) ②rtl
<5> text-indent 首行文本缩进
<6> line-height设置行高(行间距)
<7> letter-spacing设置中文字符的间距
<8> word-spacing设置英文单词的间距
<9> text-transform控制文本的大小写
值:①none 默认 ②capitalize每个单词以大写字母开头 ③uppercase仅有大写字母 ④lowercase定义无大写字母,仅有小写字母
<10>white-space 设置元素中空白的处理方式。
4.3 背景样式
background 复合属性,作用是将背景属性设置在一个声明中。
格式:{background:颜色 url(图片路径) 重复滚动 位置}
按顺序设置属性:background-color、background-image、background-repeat、background-attachment、background-position
例如:background:#00FF00 url(bgimage.gif) no-repeat fixed top;
<1> background-color设置元素的背景颜色
值:transparent默认 透明,其他 ①名称②十六进制③RGB
<2> background-image把图像设置为背景
值:url("imageURL"):图片路径
<3> background-repeat设置背景图像是否及如何重复
<4> background-attachment背景图像是否固定或者随着页面的其余部分滚动。
值:scroll 默认值滚动、fixed 不移动
<5> background-position设置背景图像的起始位置。
格式:{background-position :参数1 参数2}
固定单词:
参数1:取值,top、center、bottom
参数2:取值,left、center、right ,默认值center
百分比:
参数1表示水平位置;参数2表示垂直位置,参数2的默认值为50%
左上角是 0% 0%。右下角是 100% 100%。
像素:
参数1表示水平位置;参数2表示垂直位置,参数2的默认值为50%
左上角是 0 0
5 CSS框模型
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和 外边距 的方式。
5.1 边框属性
元素的边框 (border)是围绕元素内容和内边距的一条或多条线。
border 复合属性,用于设置四个边的样式、宽度和颜色
格式:{border: width style color}
具体来说,各属性详解如下:
<1> border-width 简写属性,用于设置元素边框宽度
格式:{border-width : top right bottom left}
<2> border-style 简写属性,用于设置元素边框样式
格式:{border-style : top right bottom left}
<3> border-color 简写属性,用于设置元素边框颜色
格式:{border-color : top right bottom left}
类似的,更细来讲,可以通过下面的属性来确定每条框线的样式,用法同上:
border-top border-right border-bottom border-left
5.2 CSS外边距
margin 简写属性。用于设置所有外边距属性,依次是上、右、下、左。
格式:{margin : top right bottom left}
例如:p {margin:2cm 4cm 3cm 4cm; }
规律:
下边没有,找上边。
右边没有,找上边。
左边没有,找右边。
5.3 CSS内边距
元素的内边距在边框和内容区之间
padding 复合属性。作用是在一个声明中设置元素的所有内边距属性
格式{padding:top right bottom left},分别设置上、右、下、左内边距
例如:h1{padding: 10px 20px 30px 40px;}
规律同上。
6 列表样式
<1> list-style简写属性。用于设置列表的属性
格式:{list-style : type position image}
例如:{list-style : square inside url('/i/arrow.gif')}
<2> list-style-type设置列表项标志的类型。
值:none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。 ....等
<3> list-style-position设置列表中列表项标志的位置。
值:inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环
绕文本不根据标记对齐。
<4> list-style-image将图象设置为列表项标志。
如:list-style-image:url("li.gif");
7 分类样式
7.1 鼠标样式
cursor 规定当指向某元素之上时显示的指针类型。
格式:{cursor : 参数}
例如:{cursor :pointer}
取值:
default 默认光标(通常是一个箭头)
pointer 光标呈现为指示链接的指针(一只手)
crosshair 光标呈现为十字线。
wait 此光标指示程序正忙(通常是一只表或沙漏)。
help 此光标指示可用的帮助(通常是一个问号或一个气球) ....
注意:如果使用URL定义图片,请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。
7.2 显示样式
<1> display设置是否及如何显示元素。
值:none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
<2> visibility设置元素是否可见或不可见。
值:visible 默认值。元素是可见的。
hidden 元素是不可见的。
collapse 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的
布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,
会呈现为 “hidden”。
对比:
visibility 不可见元素,但会占据页面上的空间
display 不可见元素,不占据页面空间
7.3 浮动样式
float 定义元素在哪个方向浮动。
值:left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动,并会显示在其在文本中出现的位置。
7.4 取消浮动
clear 设置一个元素的侧面是否允许其他的浮动元素。
格式:{clear : 参数 }
例如:{clear :both }
取值:
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
7.5 定位样式
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中
取值:
① absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left","top", "right" 以及 "bottom" 属性进行规定。
② fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left","top", "right" 以及 "bottom" 属性进行规定。
③ relative 生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
④ static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者
z-index 声明)。
left、top、right、bottom 设置元素的位置
z-index 设置层叠的次序,较大的值会覆盖在较小的上面