CSS 样式表

样式表:

作用:美化网页,页面布局。

分类;

内联,写在标签里面style=""里面的样式,优点是控制精确,可重用性差。
内嵌,嵌在网页的head里面,可重用性高
外部,样式写在另一个文件里面,如果要用直接附加过来。

优先级:内联>内嵌>外部

选择器:

* 代表所有的元素
一般的网页都需要在写这个样式,去掉有些标签自带的边界,auto代表居中
*{
margin: 0px auto;
padding:0px;
}

标签选择器:用标签的名字来选择元素。
如:div{

}

ID选择器:用标签的ID名来选择元素,ID的名字前面加#
如:#d1{

}

CLASS选择器:用class名来选择元素,class名前面加.
如:.a{

}

组合选择器:

并列关系:用逗号隔开,代表并列。
后代关系:用空格隔开,空格前面的是后面的父级元素。
筛选关系:用点隔开。

样式:

1.前景与背景

前景:指文本
font:是否倾斜 是否加粗 字体大小 选择字体;

font-family:修改字体
font-size:字体大小
font-style:字体样式,italic倾斜
font-weight:字体粗细,bold加粗

color:字体颜色
text-decoration:文本修饰,none可以去下划线
text-indent:首行缩进

背景:
background-color:背景色
background-image:背景图片
background-repeat:平铺方式
background-position:背景图片的位置
background-attachment:背景图片的固定方式

对齐方式
text-align:水平对齐方式 center居中
vertical-align:垂直对齐方式 middle居中 top靠上 bottom靠下
line-height:行高

2.边框和边界

边框:
border: 宽度 样式 颜色;
border-width:1px;
border-style:solid;
border-color:#F00;

边界:
外边距:
margin:上 右 下 左;
margin-top:上边距
margin-right:右边距
margin-bottom:下边距
margin-left:左边距

内边距:
padding:上 右 下 左;
padding-top:内上边距
padding-right:内右边距
padding-bottom:内下边距
padding-left:内左边距

3.列表与方块
width:宽度
height:高度

list-style:位置 type 图片;
list-style-type:列表标示的样式,none去掉
list-style-image:列表图片
list-style-position:列表样式的位置

4.格式布局

position: 位置,absolute绝对位置,相对于浏览器边界的位置;relative相对位置,相对于它本应该出现的位置。fixed:固定位置,它不会随着滚动。

设置好position之后,就可以用top right bottom left这四个样式。

float:流,流式布局。

两个方式:left向左流 right向右流

流后面如果要加东西的话要截断流:clear:both

z-index:值越大的越靠上层

5.其它

display: none 隐藏 block显示

visibility:hidden隐藏 visible显示

display和visibility的区别:display隐藏相当于这个元素没有了,visibility的隐藏该元素所占的位置还在,只是内容隐藏了。

overflow:超出范围。。。 hidden 超出隐藏 scroll 超出出现滚动条

cursor:pointer; 鼠标放上显示(小手)

hover:不是一个样式,用元素的ID或者CLASS之类后面跟冒号hover,代表鼠标放到此元素上显示哪些样式

作业:

1.搜索:样式表做圆角矩形;浏览器的兼容性处理。
网页模板,网页特效。

2.布局页面:http://www.harvard.edu/
http://www.wharton.upenn.edu/

时间: 2024-10-09 23:39:23

CSS 样式表的相关文章

网站开发综合技术 第二部分 CSS样式表

第2部分 CSS样式表 CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/    注释语法 2.1.样式表的基本概念 2.1.1.样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里边. <style type= "

HTML基础(三)——css样式表

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style type="text/css"> p  

css样式表分类

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="index.css"><!--用link标签引入的是外部样式表--> 7 8 9 &

CSS样式表规划经验总结

最近看到一些关于CSS文件管理的问题,下面我就自己的经验说说,一个好的CSS文件主要是看他是否具有易维护性.下面我就说说我个人的看法: 一.CSS文件的规划 我在规划CSS的时候,我比较喜欢建立全局css及各模块css.在html页面中引用全局css,在全局css中引用各模块css.比如,建立global.css为全局css,在全局css中定义“* { … } body { … }”之类的全局样式.在全局样式中通过“@import url(”xxx.css”);”引入模块css. 关于模块CSS

网页css样式表部分

层叠样式表:CSS Cascading Style Sheet.V2.1  (3.0版本有些旧系统不支持) 控制页面样式外观. 一.样式表分三类: 1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用. <input name="txt" style="border:0px; border-bottom:1px solid black;" type="text" />       (solid意思是实线) 2.内嵌样式表.

JS 控制CSS样式表

JS控制CSS样式,首先得确定一点,CSS与HTML页面的链接方式,因为CSS有3种与HTML页面结合的方式,不同的方式也会产生不同的结果. 下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... 1 <style type="text/css"> 2 .orig { 3 display: none; 4 } 5 </style> 你想要改变把他的display属性由none改为inline. 解决办法:

css样式表中设置table的第一列的宽度是固定值

table{table-layout:fixed;}table tr td:first-child,table tr td:first-child{width:120px;} 首行第一个td定宽同列的宽度都会和他一样. *注意 第一行 第一个用的是 td 还是 th css样式表中设置table的第一列的宽度是固定值,布布扣,bubuko.com

HTML静态网页(css样式表)美化

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p >内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style type="text/css"> p   //格式对p标签起作用 { 样式: } </sty

CSS样式表初始化代码

CSS为什么要初始化?建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化. 最简单的初始化方法就是: * {padding: 0; margin: 0;} .有很多人也是这样写的.这确实很简单,但有人就会感到疑问:*号这样一个通用符在编写代码的时候是快,但如果网站很大,CSS样式表文件很大,这样写的话,他会把所有的标签

CSS自学笔记(3):CSS样式表的使用

当浏览器读到一个样式表时,浏览器会根据这个样式表来格式化html文档,从而表现出各式各样的网页. 想要浏览器读到样式表,有三种方法: 1.外部样式表 外部样式表可以理解为.CSS文件.当多个页面使用同一个样式的时候,外部样式表是一个很理想的选择. 在使用外部样式表的情况下,可以通过改变一个文件来改变整个站点的外观,无需在调整html文件,尤其是多个页面使用同一个样式的时候. 每个html页面使用标签<link>来连接外部样式表: <head> <link rel="