Css样式(cascading style sheet) 层叠样式表
Body a .box{ }
Css的目的:给html加各种各样的样式----html结构和css样式样式分离---便于维护更新
Css语法
选择器{
属性名:属性值;属性名:属性值;
}
说明:
l 一个css样式包括选择器和格式声明语句
l 选择器就是选择给哪个html标签加样式
l 格式声明语句包括 属性名:属性值;
l 格式声明语句要用{ }
l 属性名,w3c已经定义好,想用的时候,直接使用
l 属性值不用双引号
l 属性值的有单位是通常是以像素px为单位,通常的情况下必须带单位
如何在html结构中引入css样式
1. 行内样式表:临时做测试用
每一个标签都有style属性
格式:<标签style=”属性名:属性值;”>内容</标签>
行内样式,只能应用当前文档中的当前对应的html标签加样式,或者里面包含的标签加该样式
例如
2. 内嵌样式表:常用的一种
格式:在head标签中输入xhtml
<style type=”text/css”>
选择器{属性名:属性值; }
</style>
内嵌样式:在当前的文档可以使用该样式,需要的时候可以使用
3. 外部样式表常用的一种
格式:<link rel=”stylesheet” href=”外部样式表文件 xx.css” type=”text/css”/>
保存的时候扩展名为.css文件
第一步,建立一个css页面,保存为扩展名为.css文件(直接写css代码)
第二步在不同的页面引入 <link rel=”stylesheet” href=”外部css文件的地址” />
可以应用多个文档,哪个html标签需要用,就可以引入
4. 导入样式表:管理css样式
格式:@import url(另外一个css样式)
注意 @import是css样式标签,所以必须放到css文件中
必须放到css样式表的最上面 例如
选择器的分类
基本选择器
u 标签选择器:选择给哪个标签加样式,自动指向该标签
语法:标签选择器名{属性:属性值; }
body { } p{ } div{ } table{ } td{ } ul{ }
注意 :不用引用,把样式自动套到对应的标签,所以的对应标签都加上该样式
u 类选择器:给一类html标签加样式
语法: 类选择器名{属性:属性值; }
选择器名是自己定义,要起得有意义
类用 .来表示
例如: .myclass{ } .page_header1{ } .login-content-input{ }
必须的引用,每一个标签都有一个class属性
<标签 class=”选择器名”> </标签>(多对多)
注意:类选择器可以引用多次;一个元素可以对多个class,一个class可对多个元素
u Id选择器:给特定的html标签加样式
格式:id选择器名{属性:属性值; }
Id 用#来表示
选择器名自定义,要起得有意义
例如 #myid{ } ,#id1 #checkform1{ }
Id必须的引用 引用的方法,每一个标签都有id属性
<标签 id=”选择器名” ></标签>(一对一)
注意:id只能引用一次,表示唯一,通常id给javascript用,不是用来设置样式的,如果想设置样式,用类选择器
!important>行间样式>id>class|属性选择器>标签
css权重
infinity正无穷
由上到下权重减小
同一个横行的选择器把他们的权重相加,渲染/显示权重大的那个,权重大小一样后面覆盖前面
u 通用选择器:(*所有)给所有的标签加样式,通配符
Html body ptable ul li ol…..给所有的html标签加样式
语法: *{属性:属性值; }
不是所有的浏览器都支持,Ie6版本不支持
复合选择器
多/分组 元素选择器:多个标签共有的属性和属性值,放到一起
语法:选择器,选择器,选择器……..{共有的属性:属性值; }
淘宝
父子/派生选择器:给html的所有后代标签加样式(自右向左的顺序)
语法:选择器1 选择器2 选择器3 { 属性:属性值; }
注意:父子选择器不固定标签/选择器,只在意父子关系成立即可。选择器之间用空格隔开
Div的后代标签 <h3> <ul> <li> <b>
<div >
<h3>PS免费公开课每日早中晚讲足6小时</h3>
<ul>
<li>最近惊现一批<b>“人造美人”,</b>你认为谁最美呢</li>
<li>最近惊现一批“人造美人”,你认为谁最美呢</li>
<li>最近惊现一批“人造美人”,你认为谁最美呢</li>
</ul>
</div>
直接子元素选择器 :给html标签的子标签加样式
格式:选择器>选择器{属性:属性值; }
某个标签里面的第一层
<div class=”news” >
<h3>PS免费公开课每日早中晚讲足6小时</h3>
<ul>
<li>最近惊现一批<b>“人造美人”,</b>你认为谁最美呢</li>
<li>最近惊现一批“人造美人”,你认为谁最美呢</li>
<li>最近惊现一批“人造美人”,你认为谁最美呢</li>
</ul>
</div>
.news>h3{color:blue; } .news h3{color:blue; }
Ul>li{color:red; }
并列选择器
伪类选择器:----锚<a>
a:link 未访问的链接
a:visited 访问过的链接
a:hover 鼠标移动链接上
a:active 单击鼠标左键的那一时刻的样式
文本属性
font-size 文本的大小 例如 font-size:12px;(浏览器默认16px,一般为12px)
font-weight 文本是否加粗 font-weight:bold(加粗)/normal (默认);
font-style 文本是否倾斜 font-style:italic ;倾斜 font-style:normal;正常
font-family:文字的字体 例如 font-family:隶书;默认是宋体
text-decoration 文本是否有线条 text-decoration:underline ;下划线 text-decoration:overline;上划线 text-decoration:line-through;中划线(等同于<del></del>标签) text-decoration:none;去掉所有的线条
text-indent:文本首行缩进 例如 text-indent:2em;
color 文本的颜色 例如color:red;
letter-spacing:字母和字母之间的距离 例如letter-spacing:2px;
word-spacing:单词和单词之间的距离 例如 word-spacing:2px;
text-align:文本的对齐方式 left center right例如text-align:center;
line-height:单行 文本所占的高度
cursor:光标标签 pointer(一只手) wait(通常是一只表或沙漏) help(通常是一个问号或一个气球) default(通常是一个箭头)
border-radius
用来设置边框圆角
如有不足请谅解,希望给您带来帮助!祝您生活愉快!!