Static Web Development CSS_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:39:56

Original

1101 people have browsed it

二章 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 sections
CSS text

text-indent:2em indent
text-align text alignment
word-spacing word spacing
letter-spacing letter spacing
text-transform character conversion
text-decoration text decoration none underline overline linethrough blink
white-space processing whitespace normal

Text

8 sections
CSS font

font-family font format
font-style font style normal italic italic oblique oblique
font-variant Set small caps
font-weight normal bold 100-900
font-size

This is also italic, the same as italic< /i>

Section 9
CSS link

//Hyperlinks are underlined by default and underlined when suspended
a{text-decoration :none;}
a:hover{text-decoration:underline;}

10 sections
CSS list

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

Section 11
CSS table

border-collapse Set whether to merge the table borders into a single border (collapse)
border-spacing sets the distance between divided cells
vertical-align vertically aligns top bottom middle
caption-side sets the position of the table title
empty-cells sets whether to display empty cells in the table
table -layout sets the algorithm (layout) for displaying units, rows, and columns

12 sections
CSS Box Model

border margin
padding inner margin
margin outer margin

The box model specifies how the element box handles element content and inner margins , border and margin mode
tr{border:1px solid #333;} //No order dashed dashed line
div{width:200;height:100;border:2px dashed #333;padding:5px; margin=10px;}
//Firefox---Layout---

Section 13
CSS outline (outline)

//Outline is A line drawn around the element, located outside the edge of the border, can play a role in highlighting the element
//outline attribute specifies the style color width of the element

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; } //Style when the input tag gets focus

Section 14
margin&padding

padding padding (length value, percentage, negative values cannot be used, default Set the top, bottom, left and right values)
padding-top //Specify a certain direction to set a specific size
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 //Can display negative values

< ;/div>

//Positioning---???---