CSS:层叠样式表  用于美化页面,修改标签样式

排版专用标记:<div>与<span>

这两个标签都是用来设置涵盖一个区块为主.区块就是表示一行 以上的数据.如果没有一样,则<span> 与</span>该数据显示前后都不会跳行.

写法分类:

1、内联写在标签里面,以属性的形式表现 属性名style

格式:<标记名称 style=”属性1:属性值1;属性2:属性值2”>…</标记名称>

例  :

<p style=”font-size:20pt;color:red;text-align:center”>排版样式</p>

 

2、内嵌写在head标签中,以标签的形式表现 标签名style

 

内嵌式排版中所有的样式定义都必须在<style>..</style>之间,而<style>..</style>又必须在<head>..</head>之间.

 

格式:   <head>

                   <style> 

                        选择器  

                    </style> 

            </head>

 选择器:通过各种方式找元素,例如:标签名 id属性值

 

 

选择器格式:

 

选择器{

 

  样式属性:样式值;

 

  样式属性:样式值;

 

 }

 

 

 选择器类型: 

1、通用选择器:  *{}

 

所有标签都需要用该选择器的属性,包括<head>、<body>

 

一般不常用,只有几个样式属性:

2、标签选择器: 标签名{}

<head>
    <style type=”text/css”>
        标记名称{属性1:属性值1;属性2:属性值2;}
        标记名称{属性1:属性值2;属性2:属性值2;}
    </style>
    </head>
    <body>
        <标记名称>…</标记名称>
    </body>

以<body>内的标签名称为选择器,具有不唯一性,所有用该标签的内容都包括

 

3、Id选择器:   #id属性值{}

 

<head>
    <style type="text/css">
        #定义名称{属性1:属性值1;属性2:属性值2;}
    </style>
    </head>
    <body>
        <标记名称 id=”定义名称”>…</标记名称>
    </body>

 

在<body>内的标签名中,定义id属性,以#id属性值为选择器,具有唯一性,id 在 HTML 文档中必须是唯一的。

 

 

4、Class选择器:.class属性值{}    

 

<head>
    <style type=”text/css”>    
        .定义名称1{属性1:属性值1;属性2:属性值2;}
    </style>
    </head>
    <body>
        <标记名称 class=”定义名称1 定义名称2”>…</标记名称>
    </body>

 

在<body>内的标签名中,定义class属性,以.class属性值为选择器,不具备为一性

 

 

 一个 class可以有多个class值,以空格分开,以优先值确定以哪个为准。

组合选择器

 

5、后代选择器:   选择器1  选择器2{}  (所有内嵌,只要是选择器2 的)

选择器1和选择器2间加空格,予以筛选,表示符合选择器1后代的所有选择器2的内容

 

 

6、子类选择器:    选择器1>选择器2{}

与后代选择器不同,只筛选选择器1的子类中的内容

 

 

7、并列选择器:   选择器1,选择器2,选择器3,,,,{}

多个选择器间用逗号分开,表示并列的选择器都有效

 

 

8、伪类选择器:    选择器:伪类

 

9、根据属性:    选择器[属性=”属性值”]{}

 

根据选择器内的某标签的属性值确定内容

 

 

 

3、外部引用:引入外部文件

   写在head标签中,以标签的形式表现,标签名 link

<link rel="stylesheet" href="css.css">

在css.css页面中直接输入选择器,不用加style

html中:

<head>
    <link rel=”stylesheet” type=”text/css” href=2.css>
</head>
<body>
<h1>这是一个标题<h1>
<h1 id="color">这是一个标题<h1>
</body>

css中

#color{
color:red
}

优先级概念

权值越高,优先级越高,显示优先级高的设置

写法 权值
内联(行内) 1000
id 100
class 10
标签名 1
通用* 0

 

             

 

 

 

 

并列选择器,权值可叠加。

 

 

posted on 2018-06-06 17:07  丁昆  阅读(120)  评论(0编辑  收藏  举报