随笔 - 54,  文章 - 0,  评论 - 0,  阅读 - 13074

CSS样式规则

具体格式如下:

选择器{ 属性1 :属性值1 ; 属性2 :属性值2 ;属性3 :属性值3 ;}

选择器用于指定CSS样式作用的HTML对象,大括号内是对该对象设置的具体样式。其中属性和属性值以“键值对”的形式出现,属性是对指定的对象设置的样式属性,如字体大小、文本颜色等。属性和属性值之间用英文“:”连接,多个“键值对”之间用英文“;”进行区分。

CSS代码结构中的几个特点:

  • CSS样式中的选择器严格区分大小写,属性和值不区分大小写,按照书写习惯一般将“选择器、属性和值”都采用小写的方式。
  • 多个属性之间必须用英文状态下的分号隔开,最后一个属性后的分号可以省略,但是为了便于增加新样式最好保留。
  • 如果属性的值由多个单词组成且中间包含空格,则必须为这个属性值加上英文状态下的引号。例如:
    p{ font-family :“Times New Roman”;}
  • 在编写CSS代码时,为了提高可读性,通常会加上CSS注释。
  • 在CSS代码中空格是不被解析的,大括号及分号前后的空格可有可无。因此可以使用空格键、Tab建、回车键等对样式代码进行排版,即所谓的格式化CSS代码,这样可以提高代码的可读性。

属性的值和单位之间是不允许出现空格的。

引入CSS样式表

行内式

行内式也称为内联样式,是通过style属性来设置元素的样式,其基本语法格式如下。

<标记名 style=“属性1 :属性值1;属性2 :属性值2; 属性3 :属性值3;”>内容</标记名>

实际上任何HTML标记都拥有style属性,用来设置行内式。其中属性和值的书写规范与CSS样式规则相同,行内式只对其所在的标记及嵌套在其中的子标记起作用。

下面通过一个案例对HTML文档中使用行内式CSS样式进行演示:

复制代码
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>行内式引入CSS样式表</title>
 6     </head>
 7     <body>
 8         <h2 style="font-size: 20px; color: red;">使用CSS行内修饰二级标题的字体大小和颜色</h2>
 9     </body>
10 </html>
复制代码

 运行效果如图所示:

 

内嵌式

内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中,并且用<style>标记定义,其中基本语法如下:

<head>
<style type="text/css">
      选择器{ 属性1 :属性值1 ; 属性2 :属性值2 ;属性3 :属性值3 ;}
</style>
</head>

该语法中的<style>标记一般位于<head>标记中<title>标记之后,也可以把它放在HTML文档的任何地方。但是由于浏览器是从上往下解析代码的,把CSS代码放在头部便于提前被下载和解析。

同时必须设置type的属性值为“text/CSS”,这样浏览器才知道<style>标记包含的是CSS代码。

 

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>内嵌式引入CSS样式表</title>
        <style type="text/css">
        h2{ text-align: center;}  /*定义标题标记对齐方式*/
        p{                        /*定义段落标记的文本样式*/
            font-size: 16px;
            color: red;
            text-decoration: underline;
        }
        </style>
    </head>
    <body>
        <h2>内嵌式CSS样式</h2>
        <p>使用style标记可定义内嵌式CSS样式表,style标记一般位于head头部标记中,title标记之后。</p>
    </body>
</html>
复制代码

 

运行效果如图所示:

 

 内嵌式CSS样式只对其所在的HTML页面有效,制作一个网站的话不适用。

链入式

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过<link />标记将外部样式表文件链接到HTML文档中。其基本语法格式如下:

<head>
<link href=“CSS文件的路径” type=“text/CSS” rel=“stylesheet” />
</head>

 

该语法中,<link />标记需要放在<head>头部标记中,并且必须指定<link />标记的3个属性,具体如下:

  • href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
  • type:定义所链接文档的类型,在这里需要指定为“text/css”,表示链接的外部文件为CSS样式表。
  • rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示别链接的文档是一个样式表文件。

 CSS基础选择器

要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则称为选择器。

标记选择器

标记选择器是指用HTML标记名称作为选择器,为页面中某一类标记对应的元素指定统一的CSS样式。其基本语法格式为:

标记名{ 属性1:属性值1;属性2:属性值2;属性3:属性值3;}

 该语法中,所有的HTML标记名都可以作为标记选择器。用标记选择器定义的样式对页面中该类型标记设置的所有元素都生效。

标记选择器的最大有点是能快速为页面中同类型的标记统一设置样式,同时这也是它的缺点——不能设计差异化样式。

 类选择器

类选择器使用“.”进行标识,后面紧跟类名。其基本语法格式为:

.类名{ 属性1:属性值1;属性2:属性值2;属性3:属性值3;}

 

该语法中,类名即为HTML元素的class属性值,大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式。

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>类选择器</title>
        <style type="text/css">
        .red{color: red;}
        .green{color: green;}
        .font22{font-size: 22px;}
        p{
            text-decoration: underline;
            font-family: "微软雅黑";
        }
        </style>
    </head>
    <body>
        <h2 class="red">二级标题文本</h2>
        <p class="green font22">段落一文本内容</p>
        <p class="red font22">段落二文本内容</p>
        <p>段落三文本内容</p>
    </body>
</html>
复制代码

 

运行效果如图所示:

 

 

通过以上代码可知标记可以使用同一个类名,这样可以实现为不同类型的标记指定相同的样式。同时一个HTML元素也可以应用多个class类,设置多个样式。在HTML标记中多个类名之间需要用空格隔开。

注意:类名的读一个字符不能使用数字,并且严格区分大小写,一般采用小写的英文字符。

id选择器

id选择器使用“#”进行标识,后面紧跟id名,其基本语法格式为:

#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

 

该语法中, id名即为HTML元素的id属性值。大多数HTML元素都可以定义id属性,元素的值是唯一的,只能对应于HTML中某一个具体的元素。

下面通过一个案例对id选择器进行演示:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>id选择器</title>
        <style type="text/css">
        #bold {font-weight: bold;}
        #font24 {font-size: 24px;}
        </style>
    </head>
    <body>
        <p id="bold">段落1:id="bold",设置粗体文字。</p>
        <p id="font24">段落2:id="font24",设置字号为24px</p>
        <p id="font24">段落3:id="font24",设置字号为24px</p> 
        <!--在很多浏览器下,同一个id也可以应用于多个标记,浏览器并不报错,但是这种做法是不被允许的,因为JavaScript等脚本语言调用id时会报错-->
        <p id="bold font24">段落4:id="font24",同时设置粗体和字号24px</p>
        <!--id选择器不支持象类选择器那样定义多个值,类似“id=“bold font24””的写法完全是错误的-->
    </body>
</html>
复制代码

 

运行效果如图所示:

通配符选择器 

通配符选择器用“*”号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素。其基本语法格式为:

*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

 

例如下面的代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距。

*{
     margin:0; /*定义外边距*/ 
     padding:0; /*定义外边距*/
  }

 

但在实际网页开发中不建议使用通配符选择器,因为它设置的样式对所有的HTML标记都生效,不管标记是否需要该样式,这样反而降低了代码的执行速度。

标签指定式选择器

标签指定式选择器又称为交集选择器,由2个选择器构成,其中第1个为标记选择器,第2个为类选择器或id选择器,2个选择器之间不能有空格。

下面通过一个案例对标签指定式选择器进行演示:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标签指定式选择器的使用</title>
        <style type="text/css">
        p{ color: blue;}
        .special{ color: green;}
        p.special{ color: red;} /*标签指定式选择器*/
        </style>
    </head>
    <body>
        <p>普通段落文本(蓝色)</p>
        <p class="special">指定了.special类的段落文本(红色)</p>
        <h3 class="special">指定了.special类的段落文本(绿色)</h3>
    </body>
</html>
复制代码

 

运行效果如图所示:

 

后代选择器

后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代。

例如,当<p>标记内嵌套<strong>标记时,就可以使用后代选择器对其中的<strong>标记进行控制,如下面代码所示:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>后代选择器</title>
        <style type="text/css">
        p strong{color: red;} /*后代选择器*/
        strong{color: blue;}
        </style>
    </head>
    <body>
        <p>段落文本<strong>嵌套在段落中,使用strong标记定义的文本(红色)。</strong></p>
        <strong>嵌套之外由strong标记定义的文本(蓝色)。</strong>
    </body>
</html>
复制代码

 

运行效果如图所示:

 

并集选择器 

并集选择器是各个选择器通过英文逗号连接而成的,任何形式的选择器都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同,就可以利用并集选择器为它们定义相同的CSS样式。

下面通过一个案例对并集选择器进行演示:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>并集选择器</title>
        <style type="text/css">
        h2,h3,p{ color: red; font-size: 14px;} /*不同标记组成的并集选择器*/
        h3,.special,#one{ text-decoration: underline;} /*标记、类、id组成的并集选择器*/
        </style>
    </head>
    <body>
        <h2>二级标题文本。</h2>
        <h3>三级标题文本,加下划线</h3>
        <p class="special">段落文本1,加下划线。</p>
        <p>段落文本2,普通文本。</p>
        <p id="one">段落文本3,加下划线。</p>
    </body>
</html>
复制代码

 

运行效果如图所示:

posted on   心有所信方能行远  阅读(727)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示