CSS
CSS的概念:Cascading Style Sheet 级联样式表
表现HTML或XHTML文件样式的计算机语言
包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
CSS的优势:1.内容与表现分离
2.网页的表现统一,容易修改
3.丰富的样式,使得页面布局更加灵活
4.减少网页的代码量,增加网页的浏览速度,节省网络带宽
5.运用独立于页面的CSS,有利于网页被搜索引擎收录
CSS的语法:
1.标签h1
选择器{声明1;
声明2;
·····}
h1 { ------h1 选择器
font-size:12px; ------属性 值 (声明)
color:#F00;
}
2.标签style
<style type="text/css">
---
h1 {
font-size:12px;
color:#F00;
}
</style>
-------
CSS样式:1.行内样式
使用属性 引入CSS样式
<h1 style="color:red;">style属性的应用</h1>
-----------
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
-------------
2.内部样式表
CSS代码写在<head>的<style>标签中
<style>
h1{color: green; }
</style>
优点:方便在同页面中修改样式
缺点:不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底
3.外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表,有两种方式
1.链接式
2.导入式
1.链接外部样式表
<head>
……
<link href="style.css" rel="stylesheet" type="text/css" />
---- --- ---------- ----
……
</head>
----------------------------------------------------------
<head>
……
<link href="文件路径" rel="使用外部样式表" type="文件类型" />
……
</head>
(1)<link>标签必须放在<head>标签中
2.导入外部样式表
<head>
……
<style type="text/css">
---
<!--
@import url("style.css");
---
-->
</style>
</head>
链接式与导入式的区别:
1.<link/>标签属于HTML,@import是属于CSS2.1
2.使用<link/>链接的CSS文件先加载到网页当中,再进行编译显示
3.使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中
4.@import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的
CSS样式优先级:行内样式>内部样式表>外部样式表---------就近原则---------就近原则:越接近标签的样式优先级越高
基本选择器
1.标签选择器 标签选择器直接应用于HTML标签
p { font-size:16px;}
----------
标签选择器 属性 值 (声明)
2.HTML标签作为标签选择器的名称
<h1>…<h6>、<p>、<img/>
3.类选择器 类选择器可在页面中多次使用
.class { font-size:16px;}----------------------<标签名 class= "类名称">标签内容</标签名>
----- --------------
类名称(选择器) 属性 值 (声明)
4.ID选择器 ID选择器在同一个页面中只能使用一次
#id { font-size:16px;}
--- ----------------
ID名称(ID选择器) 属性 值 (声明)
(1)强调ID选择器的名称就是HTML中标签的ID名称
选择器的优先级:ID选择器>类选择器>标签选择器
标签选择器是否也遵循“就近原则”?
不遵循,无论是哪种方式引入CSS样式,一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级
CSS的高级选择器:
1.层次选择器
2.结构伪类选择器
3.属性选择器
层次选择器:
后代:E F
子代:E>F
相邻:E+F
通用:(同辈)E~F
结构选择器:
E F:first-child ul li:first-child{background: red; 第一个
E F:last-child li:last-child{background: red;最后一个
E F: nth-child p:nth-child(2){background: red;第几个()
E F:nth-of-type(n) p:nth-of-type(2){background: blue;第几个()
E F:nth-child(n)在父级里从一个元素开始查找,不分类型
E F:nth-of-type(n)在父级里先看类型,再看位置
属性选择器:
P[id] 存在属性id的元素p[id] {background: yellow;}
P[id=value] 属性id=value的元素p[id=value] {background: yellow;}
P[Class="value"] 属性Class="value"的元素p[Class="value"] {background: yellow;}
P[id$=value] 属性id里以value结尾的元素p[id$=value] {background: yellow;}
P[class*=value] 属性class里包含value字符串的元素p[id*=value] {background: yellow;} p[id^=value] 属性id里以value开头的元素p[id^=value]{background: yellow;}
使用CSS修饰
字体:font:s w s f
font-family类型 font-size大小 font-weight粗细 font-style风格
文本属性
color设置文本颜色
text-align设置元素水平对齐方式
text-indent设置首行文本的缩进
line-height设置文本的行高
text-decoration设置文本的装饰
使用CSS设置超链接:
a:link 未单击访问时超链接样式
a:visited 单击访问后超链接样式
a:hover 鼠标悬浮其上的超链接样式
a:active 鼠标单击未释放的超链接样式
list-style 去除列表前面的小黑点
设置伪类的顺序:a:link->a:visited->a:hover->a:active
网页背景
背景颜色
background-color
背景图像
background-image
background-image属性
background-image:url(图片路径);
背景重复方式
background-repeat属性
repeat:沿水平和垂直两个方向平铺
no-repeat:不平铺,即只显示一次
repeat-x:只沿水平方向平铺
repeat-y:只沿垂直方向平铺
强调在设置背景图像时,这三个属性通常同时使用,只有在设置了背景图像时,背景重复方式和定位才有效
单词
html
html head body title
p br hr strong em h1 span
img a table tr td ol ul li dl dt dd
form input select option textarea
type = text password radio checkbox
button submit reset image file
css
选择器
基本选择器
#id .class h2 #one,#twl,h2{}
高级选择器
层次
h2 .title
h2 > .title
h2 + .title
h2 ~ .title
结构
:first-child
:last-child
:nth-child
:nth-of-type
:link
:visited
:hover
:active
属性
[id^$*='value']
css基本样式
字体
font- style weight size family
文本
color line-height
text- align indent decoration
超链接
列表
list-style-type
none disc ...
背景
background- color image repeat
type:样式
style:风格