css personal summary

1.什么是css，指的是叠层样式表，控制网页的的外观显示。

2.引入css的三种方式，外部链接，内部链接，内联，分别的语法是，,,style="属性：值"

3.css选择器，选择器就是要针对你要所改变的元素，而单独定义的样式，就常见的选择器：ID，CLASS,元素选择器，子元素选择器，群组选择器，相邻选择器，id选择器是唯一的意思是，只能定义一个id名相同的，class选择器，类选择器，可以为多个元素定义，id选择器和class选择器的区别在于，id是唯一的就像每个人的身份证一样只有一份号码是唯一的，而class就是像每个人的名字一样可以重复，元素选择器就是选泽要改变的元素标签名字，子选择器就是在当前元素后的子元素，群组合选择器就是选泽所有想改变的元素，相邻选择器就在当前同级元素的下一个元素。

语法：

这是一个段落

 相应的  css规则： #id{ 属性：值}

       

相应的css规则：.class{ 属性：值}

       

这是一个段落

相应的css规则：p{属性：值}

       

这是一个段落奥

相应的css规则：div p{属性：值}

      

这是一个段落奥

相应的css规则：div,p{属性：值}

   

这是一个段落奥

相应的css规则：div+div{属性：值}

 

 

这是一个段落奥

 

4.Font style

Type of font: font-family: '';Value: Songti, Microsoft Yahei, etc.

Font size: font-size:; usually in pixel value px, others include em, percentage

The thickness of the font: font-weight:; the value bold is displayed in bold, normal is normal

Font style: font-style:; italic, normal

color; color;

Line-height:; The line height of the font, the height of a line is not the distance.

5. Text style

Text decoration: text-decoration:; the values ​​are, line-through (through line), underline (underline), overline (overline)

Text alignment: text-align:; the values ​​are, center (center), left (left aligned), right (right aligned)

Text indent: text-ident:; value unit px.em, percentage

Text case: text-transform:; the values ​​are uppercase (uppercase) lowercase (lowercase) capitalize (first digit capitalized)

Word spacing of text: letter-sapcing:; value unit px, em, percentage

Word spacing: word-sapcing:; value unit px, em, percentage

6. Border

border border size, type, color, separate settings

border-width:; The value is in px em percentage

border-style:; The value is solid, solid line, dashed dotted line, etc.

border-color:; value color, which can be hexadecimal.

7.Background

Background image, whether the background is repeated, the position of the background, and whether the background scrolls are respectively

background: URL;

background-repeat:; the values ​​are: repeat (repeat) no-repeat (not repeated) repeat-x (x-axis repeat) repeat-y (y-axis repeat)

background-position:;The value can be center left right top

background-scroll:; The value is scroll fixed

can be abbreviated; background: URL repeat position scroll;

8.Hyperlink style

When we move the mouse over the a tag, the style displayed can be set through pseudo-classes. It is not necessarily the a element that can be set. In html, any element can have pseudo-classes set. Syntax: Element: hover

Style a:link; when the mouse is not visited, style a:visited when the mouse is visited; style a:hover when the mouse is moved; style a:active when the mouse is pressed;

9 pictures

Image size: You can set it by setting its width and height.

Image position: through text-align (horizontally centered), vertical-aligin (vertically centered)

Picture border: Set its border through border

10 list

Style of list: list-style-type:;Values ​​are none, circle, etc.

List-image:list-style-image:；

Form 11

The table has no border by default, I need to give it a value through border

12,box model

The box model is divided into: content area, inner margin, outer margin, border

13 layouts

Floating layout: Float block elements through float, pay attention to clear the float.

Positioning layout: position to set. Then set. The values ​​for top, right, bottom and left.

Fixed positioning: position: fixed/scroll

Static positioning: position: static