我的css笔记

1.css的使用方法

内嵌样式

    <p style="font-size:20pt;color:red;">这个Style定义<p>

    <!--里面的文字是20pt字体，字体颜色是红色。 -->

内部样式表

   <HTML>

       <HEAD>

           <STYLE type="text/css">

                H1.mylayout {

                border-width:1;

                border:solid;

                text-align:center;

                color:red;}

            </STYLE>

        </HEAD>

        <BODY>

            <H1 class="mylayout"> 这个标题使用了Style。</H1>

            <H1>这个标题没有使用Style。</H1>

        </BODY>

    </HTML>

外部样式表

首先建个style.css文件，内容如下：

     H1.mylayout {

         border-width: 1;

         border: solid;

         text-align:center;

         color:red

     }

 再建个网页：

<HTML>

    <HEAD>

        <link href="style.css" rel="stylesheet" type="text/css">

    </HEAD>

    <BODY>

        <H1 class="mylayout"> 这个标题使用了Style。</H1>

        <H1>这个标题没有使用Style。</H1>

    </BODY>

</HTML>

2.样式的优先级（高到低）

内嵌样式表(Inline Style)
内部样式表(Internal Style Sheet)
外部样式表(Extenal Style Sheet)
浏览器缺省(browser default)

3.基本语法

选择器(Selector)

1.元素选择器

    p {color:blue;}

    /*多个属性用分号隔开*/

    p{

        text-align:center；

        color:red；

    }

    /*相同的属性值赋给多个Selector*/

    h1,h2,h3,h4,h5,h6 {color:red;}

2.类选择器

/*同样的Tag构成不同的样式*/

.right {text-align:right;}

.center {text-align:center;}

3.ID 选择器

#id {color:red;}

/*id 选择器+派生选择器*/

#id p {color:red;}

/*div元素下id 选择器*/

div#id {color:red;}

4.属性选择器

[id] {color:blue；}

[title=“W3School”]{color:blue；}

a[href][title] {color:red;}

img[title~="Figure"] {border: 1px solid gray;}

CSS注释

/* CSS注释 */

注意事项

CSS 对大小写不敏感，但涉及到 HTML 中的class 和 id 时需要区分
CSS中子元素从父元素继承属性

3.CSS属性

字体属性

font-family(字体)

font-size

font-style(斜体 normal, italic, oblique )

font-weight(粗细体normal, bold )

font-variant(小的大写normal, small-caps )

font(综合属性font-size, font-style, font-weight, font-variant)

文本属性

color（文本颜色）

direction（文本方向）

text-align (left(缺省值), right ,center, justify (两端) )

text-decoration (划线none(缺省值), underline, overline, line-through)

text-indent (首行缩进length, percentage (相当于父对象宽度的百分比) )

line-height (行高normal(缺省值), length, percentage )

letter-spacing(字间距normal(缺省值), length )

背景属性

background-color

background-image

background-size

background-repeat(与image结合使用repeat-x, repeat-y, no-repeat )

background-attachment (背景附着scroll, fixed )

background-position (与image结合使用)

background (background-color, background-image, background-repeat, background-attachment, background-position )

边框属性

1.border-style用来设定上下左右边框的风格：

none (没有边框，无论边框宽度设为多大)

dotted (点线式边框)

dashed (破折线式边框)

solid (直线式边框)

double (双线式边框)

groove (槽线式边框)

ridge(脊线式边框)

inset (内嵌效果的边框)

outset (突起效果的边框)

2. border-width用来设定上下左右边框的宽度：

medium (是缺省值)

thin (比medium细)

thick (比medium粗)

length

3. border-color

4. border 它包含border-width, border-style和border-color

外边距属性

margin-left

margin-right

margin-top

margin-bottom

margin(顺序是上，右，下，左)

内边距属性

padding-left

padding-right

padding-top

padding-bottom

padding(顺序是上，右，下，左)

列表样式属性

1. list-style-type

disc (缺省值，黑圆点)

circle (空心圆点)

square (小黑方块)

decimal (数字排序)

lower-roman (小写罗马字排序)

upper-roman (大写罗马字排序)

lower-alpha (小写字母排序)

upper-alpha (大写字母排序)

none (无列表项标记)

2. list-style-position

outside (以列表项内容为准对齐)

inside (以列表项标记为准对齐)

3. list-style-image

4. list-style(综合list-style-type, list-style-position, list-style-image)

链接

a:link {color:#FF0000;} /* 未被访问的链接 */

a:visited {color:#00FF00;} /* 已被访问的链接 */

a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */

a:active {color:#0000FF;} /* 正在被点击的链接 */

下划线

a:link {text-decoration:none;}

a:hover {text-decoration:underline;}

背景色

a:link {background-color:#B2FF99;}

a:hover {background-color:#FF704D;}