Lecture web interface developed to beautify the basics of points css

    首先我们已经了解过网页设计的基础html,具体怎么美化怎么更加方便的设计文字的样式等方面,所涉及的知识点称为css,在后期网页美化中非常重要。以下主要分两个模块来介绍css。
            第一:常涉及到的三种层叠样式表,分别是:
            1、行内样式表
            <标签 style="样式名:样式值;"></标签>
            该方式不经常使用
            2、页面内样式
            <head>
         <style>
                        标签名{
                                            样式名:样式值;
                                                    }
            </style>
            </head>
            首先在<head>里面嵌套一个 <style><style>          然后具体再在里面进行样式参数取值。
            3、外部链接表
            <head>
             <link rel="stylesheet" type="text/css" href="链接样式表文件.css"/>
            </head>
            首先要在html下的<head>里面加入<link rel="stylesheet" type="text/css" href="链接样式表文件.css"/>其次再新建一个css文件,然后再该文件下编辑样式界面设定语句。
            标签名{
                                样式名:样式值;
                                }
        此时的标签名可以由三种方式,分别是
        类选择器
        .name{}
        调用:
        <any class="name"></any>
        ID选择器
        命名:
        #name{}
        调用:
        <any id="name"></any>
        标签选择器
        标签名{}   
        调用
        <标签>
            注意:id选择器以#开始,单词调用。而class类选择器可以多次调用,以. 开始。
            以上三种层叠样式表的优先级如下:
            行内>页面内>外部样式表
            第二:所涉及常用属性以及属性值

color: red; // Font Color: red
text-align: center; // text centered left / center / right / justify left / center / right / Justify
font-weight: bold; // bold font bold / bolder
font-style: italic; // italic
text-decoration: underline / none; // underline / remove underlined
font-size: 19px; // Font size: 19 pixels;
font-Family: Arial;
font: 19px Arial; / / font size font;
background: if the background color of the background image background repeating background localization position
// background image url (image path)
// whether to repeat the repeat / no-repeat / repeat- x / repeat-y repeat / non-repeat / horizontal repetition / vertical repeat
// background positioned at locations on the left, right top / center / bottom vertical left / center / right horizontal
background-size: the precise pixel / percent / em / rem background image size control
background-attachment: scroll; // fixed background image positioning scroll scroll fixed fixed
width: 400px; width
height: 300px; height
border: solid 1px # 000; border line: solid line color line thickness
Linear: solid solid line double dashed double dotted broken line dotted line border none infinity
fill:
padding Top-
padding-left
padding-right
padding-bottom
short:
padding: Value
padding: A
a represents a value of the four sides of the same filling
padding: ab &;
two values represents the vertical is a, is about B
padding: ABC;
three values are represented by a, B is about, is at C
padding: ABCD;
four values represent: top, right, bottom, left
margin : margin: value (supra)
* {// wildcard
margin: 0;
padding: 0;}
row height ling-height line spacing
general layout with vertical alignment of the line height
line height and highly consistent, the contents in the vertical middle
line is higher than height and large, the partial contents at
the height of the row height smaller than the partial contents of the
first line indent
text-indent: 2em; first line indent two characters
float:
float: left / right left floating, floating right
margin: 0 auto; horizontal Centers
Text Conversion text-transform: uppercase / lowercase / capitalize
uppercase, lowercase, first letter capitalized
list:
list-style-of the type list style
list-style-image list Image
list-style
inline elements (inline elements) a span input img label select strong b
block elements div P h1 of ~ H6 Table UL OL DL form pre
the display: block; converted into block-level element (per line)
the display: inline-block; converted to row within the block (width and height function)
the display: inline; conversion as inline elements (accounting for a content location)
four states hyperlink
a: link access state before
a: hover when the mouse hover state
a: active when the mouse click state
a: visited state of access

Guess you like

Origin blog.51cto.com/14584021/2445009