Heim > Web-Frontend > HTML-Tutorial > 静态Web开发 CSS_html/css_WEB-ITnose

静态Web开发 CSS_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:39:56
Original
1101 Leute haben es durchsucht

 

二章 CSS


1节
CSS介绍

CSS(Cascading Style Sheets) //cascade级联,串联
CSS由两个部分组成:选择器,以及一条或多条声明
selector{declaration1;declaration2;...}


一级标签

 

2节
CSS定义三种样式

1 内联式

一级标题


2 嵌入式 //一节中的样式
3 外联式
//新建一个css @charset "UTF-8"; h1{font-size:36px;color:pink;}
//指定关联文件的类型,指定关联文件与当前文件的关系,引用关联文件
//如果通过嵌入式和外部引入同时对一个 选择器进行了修饰,以最下面的一个样式为准 (最后执行的样式会覆盖前面的样式)
//外联式又有两种:
1
属于XHTML
当页面被加载时,link引入的会同时被加载
所有浏览器都支持
支持通过dom进行操作
2 @import url("*.css");
属于CSS特有的,必须嵌套到


 

7节
CSS文本

text-indent:2em 缩进
text-align 文本对齐
word-spacing 字间距 
letter-spacing 字母间距
text-transform 字符转换
text-decoration 文本装饰 none underline overline linethrough blink
white-space 处理空白符 normal


文本

 

8节
CSS字体

font-family 字体格式
font-style 字体风格 normal italic斜体 oblique倾斜
font-variant 设置小型大写字母
font-weight 字体加粗 normal bold 100-900
font-size


这个也是斜体,与italic一样

 

9节
CSS链接

//超链接 默认时去掉下划线,悬浮时加上下划线
a{text-decoration:none;}
a:hover{text-decoration:underline;}

 

10节
CSS列表

ul{list-style:none;} //没有样式
ul{list-style-position:center,center;}
ul{list-style-type:square;}
ul li{list-style-image:url(...);}

 

11节
CSS表格

border-collapse 设置是否把表格边框合并为单一的边框(折叠)
border-spacing 设置分割单元格的距离
vertical-align 垂直对齐 top bottom middle
caption-side 设置表格标题的位置
empty-cells 设置是否显示表格中的空单元格
table-layout 设置显示单元、行、列的算法(布局)

 

12节
CSS框模型(Box Model)

border 边距 
padding 内边距
margin 外边距

框模型规定了元素框处理元素内容、内边距、边框和外边距的方式
tr{border:1px solid #333;} //没有顺序 dashed虚线
div{width:200;height:100;border:2px dashed #333;padding:5px;margin=10px;}
//火狐---布局---

 

13节
CSS轮廓(outline)

//轮廓是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用
//outline属性规定元素的样式 颜色 宽度

outline-color outlie-style outline-width
div{width:200px;height:100px;border:solid #CCC 5px;outline:solid #F00 2px;}
input{outline:none;}
input:focus{border:green 1px solid;} //input标签获得焦点时的样式

 

14节
margin&padding

padding 内边距(长度值,百分比,不能用负值,默认设置上下左右值)
padding-top //指定某个方向设定具体的大小
paddng-left
padding-right
padding-bottom


#div1{width:200px;height:100px;border:red dashed 2px;padding:5px 10px 20px 30px;margin:10px;}
#div2{width:200px;height:100px;border:red dashed 2px;margin-top:-10px;margin-left:10%;}
#div3{width:50;height:50px;background:gray;margin-top:20%;}
#div4{width:960x;height:40px;background:#333;margin-left:10px;margin:0 auto;}

margin //可以显示负值





//定位---???---

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage