认识并详细了解CSS

最新推荐文章于 2023-03-12 13:11:32 发布

肉沫儿

最新推荐文章于 2023-03-12 13:11:32 发布

阅读量361

点赞数 3

分类专栏：笔记笔记-网页制作

本文链接：https://blog.csdn.net/weixin_46121783/article/details/106788930

版权

笔记同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

笔记-网页制作

6 篇文章 0 订阅

订阅专栏

层叠样式表（Cascading Style Sheets,CSS）主要用来为网页中的元素设置格式以及对网页进行排版和风格设计，它也可以和javascript等游览器端脚本语言合作做出许多动态的效果。
CSS主要有以下特点：
简化网页的代码，提高访问速度；
便于维护；
使页面内容与显示样式分离

一.CSS样式表的设置方法

1.内联样式表

写在标签内的样式称为内联样式，设置内联样式的语法格式如下：
< 标签名 style=“样式属性1：属性值1；样式属性2：属性值2；······” >
使用内联样式表来设置网页样式：

<html>
<head>
<title>内联样式</title>
</head>
<body>
           <h1 style="font-family:宋体; color:Red">红色的宋体</h1>
           <h1 style="font-family:楷体; color:blue">蓝色的楷体</h1>
           <h1>不受影响的字体</h1>
</body>
</html>

2.内部样式表

在HTML文件中使用<style>标签可以设置影响整个文档的样式，这种使用<style>标签来定义的方式称为内部样式，其语法格式如下：

< style type="text/css" >
<!--
     选择符1{样式属性：属性值；样式属性：属性值；······}
     选择符2{样式属性：属性值；样式属性：属性值；······}
     选择符3{样式属性：属性值；样式属性：属性值；······}
     ······
-->
</style>

使用内部样式表来设置网页样式：

<html>
<head>
<title>内部样式</title>
<style type="text/css">
<!--
      p{text-decoration:underline;}
      .i{font-style:italic;}
-->
</style>
</head>
<body>
          <p>这里的字的会加上下划线</p>
          <a href="a.htm" class="i">这里的字是斜体</a>
</body>
</html>

3.外部样式表

外部样式表是将样式表以单独的文件存放，让网站的所有网页均可引用此样式，在页面中用<link>标签链接，而这个<link>标签必须放在页面的<head>区域内。
【将2.内部样式表中的示例剪切到一个文本文件中，并命名为1.1.css】外部样式表的语法格式如下：
< link rel=“stylesheet” type=“text/css” href=“样式表源文件地址” >
使用外部样式表设置网页样式：

<html>
<head>
<title>外部样式</title>
<link href="1.1.css" type="text/css" rel="stylesheet" />
</head>
<body>
           <p>这里的字会加下划线</p>
           <a href="a.htm" class="i" >这里的字是斜体</a>
</body>
</html>

4.引用多个样式表

同一个CSS文件可以被多个HTML文件引用，而同一个HTML文件也可以引用多个CSS文件，其引用方式与前面的引用方式一样。
引用两个外部样式表2.1CSS（p{text-decoration:underline;}tt{color:red}和2.2CSS(p{font-style:italic;}cite{color:green}
使用引用多个样式表设置网页样式：

<html>
<head>
<title>引用多个外部样式</title>
<link href="2.1.css" type="text/css" rel="stylesheet" />
<link href="2.2.css" type="text/css" rel="stylesheet"/>
</head>
<body>
          <p>这是一个测试网页</p>
          <tt>这是在tt标签内的文字</tt><br/>
          <cite>这是在cite标签内的文字</cite>
</body>
</html>

注意：只有在IE浏览器中，才能对引用的两个CSS文件同时起作用，在FireFox、Chrome、Opera等浏览器并不支持引用多个样式表，如果同时引用几个样式，则只有引用的第一个有效。

二.选择符

1.类型选择符

类型选择符是以文档中的对象名作为选择符名，因此类型选择符可以使一个元素从原有的样式变为另一种样式。类型选择符的语法格式如下：
E {样式属性：属性值；样式属性：属性值；······}
当在CSS中声明某个元素的类型选择符后，在该文档中所有被声明的元素都将应用此样式。
使用类型选择符设置网页样式：

<html>
<head>
<title>类型选择符</title>
<style type="text/css">
<!--
      p {font-weight:bold;}
      a {text-decoration:none;}
      td {color:green}
-->
</style>
</head>
<body>
          <p>这是一个测试网页</p>
          <a href="a.htm">这是一个超链接</a><br/>
          <table border="1">
                      <tr>
                             <td>这是一个单元格</td>
                             <td>这是另一个单元格</td>
                      </tr>
           </table>
</body>
</html>

2.类选择符

（1）内联样式

<html>
<head>
<title>相同标签的不同样式</title>
<style type="text/css">
<!--
      a.red{text-decoration:underline;}
      /*普通新闻的超链接样式：有下划线*/
-->
</style>
</head>
<body>
            <a href="a.htm">这是一个普通新闻的超链接</a>
            <a href="#" style="color:red;text-decoration:none;>这是一个重要新闻的超链接</a>
</body>
</html>

(2)类选择符
类选择符可以与元素配合使用，类选择符的语法格式如下所示：
E.classname{样式属性：属性值；样式属性：属性值；······}
其中E为元素名称，classname是用于选择样式所用的标签名称，只有E元素才能选择是否使用classname样式。
使用类选择符设置网页样式：

<html>
<head>
<title>类选择符</title>
<style type="text/css">
<!--
       a.red{color:red;}       /*红色的超链接*/
       a.green{color:green;}   /*绿色的超链接*/
       td{color:red;}          /*表格内红色的文字*/
       td.green{color:green;}  /*表格内红色的文字*/
-->
</style>
</head>
<body>
       <a href="a.htm">这是没有样式的超链接</a><br/>
       <a href="#" class="red">这是一个class属性值red的超链接</a><br/>
       <a href="#" class="green">这是一个class属性值green的超链接</a>
       <a href="a.htm1" class="black">这是一个引用了不存在样式的超链接</a>
</body>
</html>

第一个超链接没有使用class属性来指明样式，样式中也没有a这个类选择符，所以第一个超链接使用的是默认的样式
第二个超链接用class属性指明了使用名为red的类选择符样式，即使用样式中声明a.red样式，因此超链接为红色
第三个超链接用class属性指明了使用名为green的类选择符样式，即使用样式中声明a.green样式，因此超链接为绿色
第四个超链接用class属性指明了使用名为black的类选择符样式，即使用a.black样式，但样式表中没有该样式，所以第四个超链接使用的默认的样式

（3）独立于元素的类选择符
类选择符可以与元素配合使用，也可以独立于元素使用，当类选择符独立于元素使用时，类选择符的语法代码如下：
.classname {样式属性：属性值；样式属性：属性值；······}
使用类选择符设置网页样式：

<html>
<head>
<title>类选择符</title>
<style type="text/css">
<!--
       .red{color:red;}       /*红色的文字*/
       .green{color:green;}   /*绿色的文字*/
       a.blod{font-weight:bolder;} /*粗体*/
-->
</style>
</head>
<body>
       <a href="#" class="red">这是一个class属性值red的超链接</a>
       <a href="#" class="green">这是一个class属性值green的超链接</a>
       <a href="#" class="blod">这是一个class属性值blod的超链接</a>  
       <table>
         <tr>
              <td class="red"> 这是一个class属性值red的单元格</td>
         </tr>
         <tr>
               <td class="green"> 这是一个class属性值green的单元格</td>
         </tr>
         <tr>
              <td class="blod"> 这是一个class属性值blod的单元格</td>
         </tr>
       </table>
 </body>
 </html>

在.red和.green样式之前没有Element，所以任何一个标签都可以通过class来引用这个样式，但是a.blod样式使用了Element，因此只能由a标签来引用
虽然在单元格中引用了.bold样式，但改样式不属于<td>标签，所以该样式并没有用在单元格中

3.ID选择符

ID选择符的使用方法与类型选择符和类选择符都有点类似，其语法格式如下：
#idname {样式属性：属性值；样式属性：属性值；······}
ID选择符只是针对网页中某个元素的，这个元素可以是任意元素，但其id的属性值必须是ID的选择符的名称
使用ID选择符设置网页样式：

<html>
<head>
<title>ID选择符</title>
<style type="text/css">
<!--
     #myclass{color:red;}    /*红色的文字*/
-->
</style>
</head>
<body>
    <a href="#" id="myclass">这是一个使用了#myclass属性超链接</a><br/>
   <a href="#" id="yourclass">这是一个没有任何效果的普通超链接</a>
</body>
</html>

4.包含选择符

在包含选择符中，可以为一个特定的结构创建样式，例如，可以创建一个超链接样式，但该样式只有在超链接包含在<p>标签内才有效。其语法格式如下：
E1 E2 {样式属性：属性值；样式属性：属性值；······}
使用包含选择符设置网页样式：

<html>
<head>
<title>包含选择符</title>
<style type="text/css">
<!--
     p a {font-weight:bold;}
     table tr td table tr td {text-decoration:line-through;}
-->
</style>
</head>
<body>
    <p>这是一个测试网页，<a href="#">这是一个超链接</a></p>
    <a href="#">这是另一个超链接</a><br/>
    <table border=‘1“>
        <tr>
              <td>这是一个单元格</td>
              <td>
                     <table border="2">
                          <tr>
                                <td>这是另一个单元格</td>
                          </tr>
                     </table>
              </td>
        </tr>
    </table>
</body>
</html>

第一个样式即为包含样式，即只有包含在<p>元素中的超链接才能是粗体，所以第一个显示粗体，第二个没有显示
包含选择符也可以很长，比如最后一个样式：“table tr td table tr td{text-decoration:line-through;},指明嵌套在一个表格中的另一个表格的单元格的文字有贯穿线显示

5.选择符分组

在CSS中支持选择符分组，即可以把相同样式的选择符放在一个组内，如此可以提高效率。其语法格式代码如下：
E1，E2，E3·····{样式属性：属性值；样式属性：属性值；·····}

<html>
<head>
<title>选择符分组</title>
<style type="text/css">
<!--
     h1,h2,h3{text-decoration:line-through;}
     p,h4{text-decoration:underline;}
-->
</style>
</head>
<body>
    <h1>标题：h1</h1>
    <h2>标题：h2</h2>
    <h3>标题：h3</h3>
    <p>p元素</p>
</body>
</html>

6.通用选择符

通用选择符的语法格式如下：
*{样式属性：属性值；样式属性：属性值；·····}
使用通用选择符设置网页样式：

<html>
<head>
<title>通用选择符</title>
<style type="text/css">
<!--
   *{text-decoration:line-through;}
-->
</style>
</head>
<body>
   <a href="#">这是一个超链接</a>
   <p>这是p标签内的文字</p>
   <b>这是b标签内的文字</b>
</body>
</html>

但是以上的通用选择符很少用，大多数情况下让某个标签下的所有标签都使用一个样式，此时的语法格式如下：
E * {样式属性：属性值；样式属性：属性值；·····}
使用通用选择符设置网页样式：

<html>
<head>
<title>通用选择符</title>
<style type="text/css">
<!--
     div * {text-decoration:line-through;}
-->
</style>
</head>
<body>
    <p>这是一个测试网页</p>
    <div>这是一个测试网页，<p>这是一个超链接</p>这是一个测试网页，<b> 这是b标签内的文字</b></div>
</body>
</html>

注意：这种通用选择符只作用于类型选择符下的所以标签内

7.子选择符

从某种程度来讲，子选择符与包含选择符很像，但必须从父级标签指定子标签，其语法格式如下：
E1 >E2 {样式属性：属性值；样式属性：属性值；·····}
使用子选择符设置网页样式：

<html>
<head>
<title>子选择符</title>
<style type="text/css">
<!--
   p>a {font-style:italic;}
   div>p>b {text-decoration:line-through;}
-->
</style>
</head>
<body>
    <p>这是一个测试网页,<a href="#">这是一个超链接</a></p>
    <div>这是一个div，
    <p>从这里开始换行
           <b>这里是b标签内的文字</b>
           从这里换行结束。
     </p>
      这是另一段
    <div>
</body>
</html>

注意：子选择符只能对子标签有用，不能跨标签，而包含选择符对跨标签也有作用。

三.伪类和伪元素

1.超链接的伪类

伪类最开始被提出来可以说完全是因为超链接，CSS中有四个伪类：未访问过的URL、以访问过的URL、正在点击的超链接、指针经过超链接时的状态四个伪类，即link、visited、active、hover。这四个伪类都只能使在超链接上，其使用方法如下：
a:visited {样式属性：属性值；样式属性：属性值；······}
a:active {样式属性：属性值；样式属性：属性值；······}
a:hover {样式属性：属性值；样式属性：属性值；······}
a:link {样式属性：属性值；样式属性：属性值；······}

注意：在link、active、hover、link之前都有一个冒号，这个冒号就是伪类和伪元素的标记符，所有的伪类和伪元素都是以冒号开头。冒号前为该伪类和伪元素作用的元素。
使用伪类设置网页的样式：

<html>
<head>
<title>伪类</title>
<style type="text/css">
<!--
     a:visited {text-decoration:none;color:green;font-size:10pt;}
     a:active {text-decoration:none;color:#000000;font-size:10pt;}
     a:hover {text-decoration:underline;color:#000000;font-size:14pt;}
     a:link {text-decoration:none;color:red;font-size:10pt;}
-->
</style>
</head>
<body>
    <p><a href="a.htm">未访问过的超链接</a></p>
    <p><a href="#">已访问过的超链接</a></p>
    <p><a href="#">普通超链接</a></p>
</body>
</html>

2.伪元素

常用的伪元素有：:first-letter和 :first-line。这两个伪元素可以将样式作用在文本的首字和首行，通常用在块级元素中
使用伪元素设置网页样式：

<html>
<head>
<title>伪元素</title>
<style type="text/css">
<!--
   p:first-letter {font-size:200%;}
   div:first-line {text-decoration:underline;}
-->
</style>
</head>
<body>
    <p>标签内的第一个文字是其他文字大小的两倍</p>
    <div>标签内的第一行文字有下划线</div>
</body>
</html>

四.CSS优先级

CSS可以根据产生冲突的样式选择符的权重来判断使用哪种样式，通常选择权重大的样式，以下是有关权重的一些规定：

类型选择符（E）的权重为0001
类选择符（.classname）的权重为0010
ID选择符（#idname）的权重为0100
通用选择符（ * ）的权重为0000
子选择符的权重为0000
属性选择符（[attr]）的权重为0010
伪类选择符（：pseudo-classes）权重为0010
伪元素（：pseudo-elements）权重为0001
包含选择符：包含的选择符权重值之和
内联样式的权重为1000
继承的样式权重为0000
以上权重由大到小依次是1000、0100、0010、0001、0000

比较几个选择符的优先级：

<html>
<head>
<title>样式冲突</title>
<style type="text/css">
<!--
    p {color:red;}       /*权重为0001*/
    .vip {color:green;}    /*权重为0010*/
    #myid {color:purper;}    /*权重为0100*/
    p[align] {color:blue;}     /*权重为0010*/
-->
</style>
</head>
<body>
     <p>文字</p>
     <p class="vip">文字</p>
     <p id="myid" class="vip">文字</p>
     <p align="center"> class="vip">文字</p>
</body>
</html>

五.CSS中的单位

1.颜色单位

#RRGGBB是比较常用的方法，其中RR代表红色值，GG代表绿色值，BB代表蓝色值，取值范围是00~FF。例如，红色可以#FF0000来表示
rgb(R、G、B）是颜色的另一种表达方法，其中R代表红色值，G代表绿色值，B代表蓝色值，取值范围是0~255或0%-100%。例如，红色可以用rgb（255，0，0）表示
使用颜色名称来表达颜色比较直观，例如，红色可直接用red表示，但不同浏览器有不同的预定义颜色名称

2.长度单位

（1）绝对长度单位包括pt、cm、mm、in和pc等

pt:磅，这是标准的印刷上的量度，广泛使用在印刷和排版上
cm:厘米，全世界统一的度量单位，
mm:毫米，全世界统一的度量单位
in:英寸，常用的度量单位
pc：派卡，相当于我国新四号铅字大小

以上五种绝对长度单位换算方法：1in=2.54cm=25.4mm=72pt=6pc=12pt

（2）相对长度单位包括：px、ex、em等

px：像素，是相对显示器屏幕的分辨率而言的
ex：相对于字符x的高度，该高度通常为字体尺寸的一半
em：相对于当前对象内文本的字体尺寸

3.时间长度

在CSS中时间单位只有两种：s（秒）和ms（毫秒），其中1s=1000ms。
input {pause-before:2s;}
input {pause-before:2000ms;}

4.角度单位

CSS中角度单位包括deg、grad、rad

deg：就是平常说的度，一个圆等于360deg
grad：梯度。以梯度等于一个直角的1%，一个圆等于400grad
rad：弧度。把等于半径长的圆弧所对的圆心角叫1弧度的角。
img {azimuth：90deg}
img {azimuth：30grad}
img {azimuth：6rad}

5.频率单位

CSS中的频率单位只有两个：Hz（赫兹）和kHz（千赫兹），都是声波单位，其中1kHz=1000Hz
strong {pitch：75Hz}
strong {pitch：75kHz}

肉沫儿

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
认识并详细了解CSS

层叠样式表（Cascading Style Sheets,CSS）主要用来为网页中的元素设置格式以及对网页进行排版和风格设计，它也可以和javascript等游览器端脚本语言合作做出许多动态的效果。CSS主要有以下特点：简化网页的代码，提高访问速度；便于维护；使页面内容与显示样式分离一.CSS样式表的设置方法1.内联样式表写在标签内的样式称为内联样式，设置内联样式的语法格式如下：< 标签名 style=“样式属性1：属性值1；样式属性2：属性值2；······” >使用内联样式
复制链接

扫一扫