前端三件套--读书笔记（二）CSS

摘要：

书名：《网页设计与编程》-------耿增民

内容：CSS修饰HTML标签

一、CSS的添加方法

css样式表的添加方法分为行内式、嵌入式、链入式

1.行内式：

是直接在HTML标签的style属性中添加CSS

语法格式为：<div style="属性1:属性值1;属性2=属性值2">内容</div>

只能改变当前标签的样式

2.嵌入式：

是在HTML头部的<style>标签下书写CSS代码

语法格式：

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

只对当前网页有效

3.链入式：

是将所有样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表链接到HTML文档中。

语法格式：

 <head>
  <link rel="stylesheet" href="CSS文件路径" type="text/css">
</head>

属性：

herf：定义所链接外部样式表文件的URL地址
type：定义所链接文档的类型，text/css表示链接的外部文件为CSS样式文件
rel：定义当前文档与被链接文档之间的关系。stylesheet表示被链接文档是一个样式表文件

二、CSS基础选择器

要使用css对HTML页面中的元素实现一对一，一对多，多对一的控制，就要用到CSS选择器

1.标签选择器：

语法格式：

 <style>标签名{属性1:属性值1;属性2:属性值2;}</style><!--定义在head中-->

最大的优点就是能快速的为页面中同种类型的标签统一设置样式

2.类选择器：

语法格式：

 <style>
      .类名{属性1:属性值1;属性2:属性值2;}
    </style><!--定义在head中-->

类名就是HTML标签的class属性值

eg.

 <style>
    .center {
        text-align: center;
    }
    .blue {
        color: blue;
    }
</style><!--定义在head中-->
 
<p class="center blue">你好</p>

3.id选择器：

语法格式：

 <style>
      #id名{属性1:属性值1;属性2:属性值2;}
    </style><!--定义在head中-->

eg.

 <style>
      #font1{font-weight: bold;}
    </style><!--定义在head中-->
 
<p id="font1">Hello World</p>

注意：类选择器定义一次后可反复使用，id选择器定义一次后只能被引用一次

案例：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      #green {
        color: green;
      } /*id选择器*/
      .red {
        color: red;
      } /*类选择器*/
      #blue {
        color: blue;
      }
      .font1 {
        font-size: 22px;
      }
      p {
        /*标签选择器*/
        font-family: "黑体";
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <h2 id="green">独坐敬亭山</h2>
    <p class="red font1">唐:李白</p>
    <p class="font1">众鸟高飞尽</p>
    <p id="blue">孤云独坐闲</p>
    <p>相看两不厌</p>
    <p>只有敬亭山</p>
  </body>
</html>

4.通配符选择器：

它能匹配页面中所有的标签，它设置的样式对所有的HTML标签都生效

语法格式：

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

eg.

 *{
  margin:0;
  padding:0;
}

5.后代选择器：

格式：

 <style>
  p em{color: aliceblue;}
</style>

用于嵌套结构<p><em>内容</em></p>。

不只两个，还可以继续叠加

6.交集选择器：

由两个选择器直接构成，其中第一个选择器必须是标签选择器，第二个选择器必须是class类选择器或者id选择器。两个选择器之间不能有空格。

格式：

 p.one{color:green}
或
p#one{color:green}

仅仅适用于<p class="one">标签，不会影响其他标签

7.并集选择器：

格式：

 <style>
  p,
  .color,
  #font {
    color: red;
    font-size: 20px;
  }
</style>

如果某些选择器定义的样式完全相同或者部分相同。

三、链接伪类选择器

超链接伪类	描述
a: link	超链接的默认样式
a: visited	超链接被访问之后的样式
a: hover	鼠标经过、悬停时超链接的样式
a: active	鼠标点击不放时超链接的样式

案例：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      a {
        margin-left: 20px;
      } /*设置左边距*/
      a:link,
      a:visited {
        color: #000; /*设置默认和被访问之后的颜色为黑色*/
        text-decoration: none; /*设置下划线的效果为无*/
      }
      a:hover {
        color: #093; /*设置鼠标悬停时的颜色为绿色*/
      }
      a:active {
        color: red; /*设置鼠标点击不放时的颜色为红色*/
      }
    </style>
  </head>
  <body>
    <a href="#">首页</a>
    <a href="#">风景名胜</a>
    <a href="#">美味佳肴</a>
    <a href="#">著名人物</a>
    <a href="#">联系我们</a>
  </body>
</html>

四、CSS修饰文本

1.设置字体类别：

font-family:字体名称

eg.

 p{font-family:黑体;}
<!--也可以同时指定多个字体，中间用逗号隔开，如果字体名称包含空格，则应用引号括起来-->
p{font-family:Arial,"Times New Roman";}

2.设置字体尺寸：

font-size:文字大小

eg.

 p{font-size:16px;}

其可用属性：

em：以相对父标签字体大小的方式来设置字体大小。
rem：相对于根HTML标签字体大小的方式设置字体大小
px：像素
in：英寸
cm：厘米

3.设置字体粗细：

font-weight：文字加粗

eg.

 .one{font-weight:400;}

属性：

normal：默认值，定义标准字符。
bold：定义粗体字符
bolder：定义更粗字符
lighter：定义更细字符
100-900(100的整数倍)：定义由细到粗的字符

4.设置字体的倾斜

font-style:字体的倾斜

eg.

 p{font-style:italic;}

属性：

normal：默认值，显示标准字体样式
italic：显示斜体的字体样式
oblique：显示倾斜体的字体样式

5.设置服务器字体

@font-face:用于设置服务器的字体，可以使用用户计算机未安装的字体

eg.

 @font-face{
	font-family:字体名称;/*服务器字体名称*/
	src:字体路径; /*调用服务器字体的路径*/
}

6.设置文本颜色：

color：文本颜色

eg.

 p{color:red;}

属性：

预定义颜色名：red、blue、yellow等
十六进制：#000等
RGB代码：rbg(255,0,0)或rbg(100%,0,0)等
RBGA：该模式是在RBG红蓝绿三原色的基础上添加了不透明度参数alpha。alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的数字

CSS规范推荐的颜色名称：

名称	颜色
white	白色
blue	蓝色
red	红色
yellow	黄色
black	黑色
gray	灰色
green	绿色
purple	紫色

7.设置文本的修饰

text-decoration:文本修饰

eg.

 .one{text-decoration:underline;}

属性：

none：没有修饰（默认值）
underline：下划线
overline：上划线
line-through：删除线

可以加多个属性，用空格隔开

 .one{text-decoration:underline line-through;}

8.设置文本的水平对齐方式

text-align：文本的水平对齐方式

 p{text-align:center;}

属性：

left：左对齐（默认值）
right：右对齐
center：居中对齐
justify：两端对齐

9.设置文本缩进：

text-indent:文本缩进

 p{text-indent:2em;}

em可以理解为字符数量，上面代码表示首行缩进两个字符。

10.设置行高：

line-height:设置行高

 p{line-height:200%;}

属性：

normal：默认行高
%：基于当前字体尺寸的百分比行间距。
px：像素，设置固定行高

11.设置字符间隔

letter-spacing:设置字符间距。

 p{letter-spacing:30px;}

属性：

normal：默认值，标准字符间隔
length：属性值可以是不同单位的数值，允许是负值。

12.设置文字的截断

text-overflow:设置文字的截断

 p{text-overflow:clip;}

属性：

clip：当文本溢出时截断显示，不显示省略标记（...）
ellipsis：当文本溢出时显示省略标记（...）

text-overflow属性，还必须配合white-space：nowrap(强制文本在一行内显示)和overflow：hidden(溢出内容为隐藏)同时使用才能生效

eg.

 <style>
  p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

13.案例：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      h1 {
        font-family: 黑体;
        text-align: center;
      }
      p {
        font-size: 18px;
        font-family: "微软雅黑";
        text-indent: 2em;
      }
      .one {
        font-size: 20px;
        font-weight: bolder;
        font-style: italic;
        text-decoration: underline;
      }
      #two {
        color: red;
        line-height: 300%;
        letter-spacing: 10px;
      }
    </style>
  </head>
  <body>
    <h1>北京某某大学简介</h1>
    <p class="one">
      2020 年春节期间，有一个特殊的日期引起了大家的注意：2020 年 2 月 2
      日。因为如果将这个日期按 “yyyymmdd” 的格式写成一个 8 位数是
      20200202，恰好是一个回文数。我们称这样的日期是回文日期。
    </p>
    <p id="two">
      有人表示 20200202 是 “千年一遇” 的特殊日子。对此小明很不认同，因为不到 2
      年之后就是下一个回文日期：20211202 即 2021 年 12 月 2 日。 也有人表示
      20200202 并不仅仅是一个回文日期，还是一个 ABABBABA
      型的回文日期。对此小明也不认同，因为大约 100 年后就能遇到下一个 ABABBABA
      型的回文日期：21211212 即 2121 年 12 月 12 日。算不上 “千年一遇”，顶多算
      “千年两遇”。
    </p>
  </body>
</html>

五、CSS修饰图像

1.设置图像边框：

border-style：设置图像边框样式

属性：
- none：无边框
- solid：实线边框
- dashed：虚线边框
- dotted：点画线边框
- double：双线边框
border-color：设置图像边框颜色

属性：
- 预定义颜色名：red、blue、yellow等
- 十六进制：#000等
- RGB代码：rbg(255,0,0)
border-width：设置图像边框宽度

属性值通常为像素值

案例：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Css修饰图像边框</title>
    <style type="text/css">
      img {
        border-color: red;
        border-width: 20px;
      }
      .one {
        border-style: dotted;
      }
      .two {
        border-style: dashed;
      }
      .three {
        border-style: solid;
      }
      .four {
        border-style: double;
      }
      .five {
        border-style: solid dotted dashed double; /*按上下左右的顺序依次设置样式*/
        border-color: red green blue purple;
        border-width: 10px 11px 12px 13px;
      }
    </style>
  </head>
  <body>
    <img src="123.jpg" class="one" width="1000px" height="700px" />
    <img src="123.jpg" class="two" width="1000px" height="700px" />
    <img src="123.jpg" class="three" width="1000px" height="700px" />
    <img src="123.jpg" class="four" width="1000px" height="700px" />
    <img src="123.jpg" class="five" width="1000px" height="700px" />
  </body>
</html>

2.设置图像的缩放

案例：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img.test1 {
        width: 30%; /*相对宽度为30%*/
        height: 40%;
      }
      img.test2 {
        width: 150px; /*绝对宽度为150px*/
        height: 150px;
      }
    </style>
  </head>
  <body>
    <img src="123.jpg" alt="" class="test1" />
    <!-- 相对于父元素缩放的大小，当浏览器窗口改变时，这幅图像的大小也发生相应变化 -->
    <img src="123.jpg" alt="" class="test2" />
    <!-- 绝对像素缩放的大小 -->
  </body>
</html>

3.设置背景图像

background-image:设置背景图像

 background-image:url(images/img2.jpg)

属性：

none：表示不加载图像
url：表示要插入背景图像的路径

4.设置背景图像的重复

background-repeat:设置背景图像的重复

 background-repeat:repeat-x;

属性：

repeat:默认值，表示背景图像在水平和垂直方向上平铺
repeat-x:表示背景图像在水平方向平铺
repeat-y:表示背景图像在垂直方向平铺
no-repeat:表示背景图像不平铺

案例：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      body {
        background-image: url(123.jpg); /*设置网页背景图片*/
        background-size: 1920px;
        background-repeat: repeat; /*设置背景图像在水平和垂直方向上平铺*/
        background-repeat: repeat-x; /*设置背景图像在水平方向平铺*/
        background-repeat: repeat-y; /*设置背景图像在垂直方向平铺*/
      }
    </style>
  </head>
  <body></body>
</html>

5.设置背景图像的位置

background-position:设置背景图像的位置

 backgound-position:center bottom;

属性：

关键字：水平方向值left、center、right；垂直方向值top、center、bottom。
像素值：像素值定位的是图像左上角在标签中的坐标
百分比：背景图像和标签的指定点对齐

案例：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      body {
        background-color: #30f;
      }
      .box {
        width: 500px;
        height: 500px;
        border: 5px solid #f33;
        background-image: url(123.jpg);
        background-repeat: no-repeat;
        /*background-position:right top; 用关键字控制背景图像的位置*/
        /*background-position:150px 280px; 用像素值控制背景图像的位置*/
        background-position: 50% 50%; /*用百分比控件背景图像的位置*/
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

6.设置背景图像固定

backgound-attachment:设置背景图像固定。

 background-attachment:fixed

属性：

scroll:默认值，图像跟随页面一起滚动
fixed:图像固定在屏幕上，不随页面滚动。

案例：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      body {
        background-image: url(123.jpg);
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-attachment: fixed; /*设置背景图像的位置固定*/
        background-size: 1920px;
      }
      p,
      h1 {
        color: #30f;
      }
    </style>
  </head>
  <body>
    <h1>文化人那叫表白吗？那叫全文背诵！</h1>
    <p>
      1.龙应该藏在云里，你应该藏在心里。——沈从文《月下小景》
      2.我如一张离了枝头日晒风吹的叶子，半死。但是你的嘴唇可以使他润洋，还有你颈脖同额。——沈从文《无题》
      3.世事如书，我偏爱你这一句，愿做个逗号，待在你的脚边。——张嘉佳《摆渡人》
      4.世界上美好的东西不太多，立秋傍晚从河对岸吹来的风，和二十来岁笑起来要人命的你。——宋小君《下雨和见你》
      5.我喜欢你，所以希望你被簇拥包围，所以你走的路要繁花盛开，要人声鼎沸。——木苏里《某某》
    </p>
  </body>
</html>

7.设置背景图像的大小

background-size:设置背景图像的大小

 background-size:cover;

属性：

像素值：设置背景图像的宽度和高度，第一个值设置宽度，第二个值设置高度
百分比：以父标签的百分比来设置背景图像的宽度和高度，第一个值设置宽度，第二个值设置高度
cover:使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景区域中。
contain:使背景图像的宽度，高度完全适应背景区域

案例：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      body {
        background-image: url(123.jpg);
        background-repeat: no-repeat;
        background-size: cover; /*背景图像完全覆盖背景区域*/
      }
      p,
      h1 {
        color: yellow;
      }
    </style>
  </head>
  <body>
    <h1>文化人那叫表白吗？那叫全文背诵！</h1>
    <p>
      1.龙应该藏在云里，你应该藏在心里。——沈从文《月下小景》
      2.我如一张离了枝头日晒风吹的叶子，半死。但是你的嘴唇可以使他润洋，还有你颈脖同额。——沈从文《无题》
      3.世事如书，我偏爱你这一句，愿做个逗号，待在你的脚边。——张嘉佳《摆渡人》
      4.世界上美好的东西不太多，立秋傍晚从河对岸吹来的风，和二十来岁笑起来要人命的你。——宋小君《下雨和见你》
      5.我喜欢你，所以希望你被簇拥包围，所以你走的路要繁花盛开，要人声鼎沸。——木苏里《某某》
    </p>
  </body>
</html>

六、CSS修饰表格

1.用CSS设置表格边框合并

border-collapse:设置表格边框合并

 border-collapse:separate;

属性：

separate：默认值，边框会被分开，不会忽略border-spacing和empty-cells属性
collapse：边框合并，会忽略border-spacing和empty-cells属性

案例：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      .one {
        border-collapse: separate; /*表格边框分开*/
      }
      .two {
        border-collapse: collapse; /*表格边框合并*/
      }
    </style>
  </head>
  <body>
    <table class="one" border="2">
      <tr>
        <td>水浒传</td>
        <td>三国演义</td>
      </tr>
      <tr>
        <td>西游记</td>
        <td>红楼梦</td>
      </tr>
    </table>
    <br />
    <table class="two" border="2">
      <tr>
        <td>水浒传</td>
        <td>三国演义</td>
      </tr>
      <tr>
        <td>西游记</td>
        <td>红楼梦</td>
      </tr>
    </table>
  </body>
</html>

2.用CSS设置单元格边框距离

border-spacing:设置相邻单元格边框间的距离（仅用于“边框分离”模式）

 border-spacing:10px 50px;

其属性值为相邻单元格边框之间的距离，除非border-collapse被设置为separate，否则将忽略这个属性。使用px、cm等单位，不允许使用负值。

如果定义一个length参数，则定义的是水平和垂直间距
如何定义两个length参数，则第一个设置水平间距。第二个设置垂直间距

案例：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      .one {
        border-collapse: separate; /*表格边框分离*/
        border-spacing: 10px; /*单元格水平，垂直距离均为10px*/
      }
      .two {
        border-collapse: separate; /*表格边框分离*/
        border-spacing: 10px; /*单元格水平，垂直距离均为10px 垂直距离为50px*/
      }
    </style>
  </head>
  <body>
    <table class="one" border="1">
      <tr>
        <td>水浒传</td>
        <td>三国演义</td>
      </tr>
      <tr>
        <td>西游记</td>
        <td>红楼梦</td>
      </tr>
    </table>
    <br />
    <table class="two" border="1">
      <tr>
        <td>水浒传</td>
        <td>三国演义</td>
      </tr>
      <tr>
        <td>西游记</td>
        <td>红楼梦</td>
      </tr>
    </table>
  </body>
</html>

3.隐藏表格中空单元格上的边框

empty-cell:隐藏表格中空单元格上的边框（仅用于“边框分离”模式）

 empty-cells:hide

属性：

show：默认值，在空单元格周围显示边框
hide：单元格无内容时隐藏单元格边框

案例：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      table {
        border-collapse: separate; /*表格边框分离*/
        empty-cells: hide; /*单元格无内容时隐藏单元格边框*/
      }
    </style>
  </head>
  <body>
    <table border="2">
      <tr>
        <td>水浒传</td>
        <td>三国演义</td>
      </tr>
      <tr>
        <td>水浒传</td>
        <td></td>
      </tr>
    </table>
  </body>
</html>

七、CSS修饰表单

案例：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style1.css" type="text/css" />
  </head>
  <body>
    <div class="login">
      <h2>用户登录</h2>
      <form action="" method="post">
        账&nbsp;&nbsp;号:
        <input type="text" name="username" id="username" class="username" />
        密&nbsp;&nbsp;码:
        <input type="password" name="password" id="password" class="password" />
        <input
          type="submit"
          name="button1"
          id="button1"
          value="登录"
          class="btns"
        />
        <input
          type="button"
          name="button2"
          id="button2"
          value="注册"
          class="btns"
        />
      </form>
    </div>
  </body>
</html>

css文件：

 @charset "utf-8";
body {
  font-family: "微软雅黑";
  background-image: url(123.jpg);
  color: white;
  background-repeat: repeat-x; /*设置背景图像水平重复*/
  background-attachment: fixed; /*图像固定在屏幕上，不随页面滚动*/
  background-size: 100% 100%; /*设置背景图像大小*/
}
.login {
  margin: 0 auto; /*使表单居中*/
  width: 280px;
  padding: 14px;
  border: dashed 2px #b7ddf2; /*为表单添加边框*/
  border-radius: 20px; /*为表单添加圆角边框*/
  background: rgba(255, 255, 255, 0.1); /*为表单添加背景颜色*/
}
.login * {
  font-family: "宋体";
  font-size: 15px;
}
.login h2 {
  /*设置标题样式*/
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  padding-bottom: 5px;
  border-bottom: solid 1px #b7ddf2; /*下边框为1px实线淡蓝色边框*/
}
.username,
.password {
  width: 180px;
  height: 18px;
  padding: 2px 0px 2px 18px; /*文本框左侧内边距18px，为背景图像预留显示位置*/
  margin-bottom: 8px;
  color: #03c; /*文本框和密码框内输入文字颜色为蓝色*/
}
.username {
  background: #fff url(123.jpg) no-repeat left center; /*用户名文本框背景图像*/
  border: 2px solid blue;
}
.password {
  background: #fff url(123.jpg) no-repeat left center; /*用户名文本框背景图像*/
  border: 2px solid yellow;
}
.btns {
  margin-left: 38px;
  margin-top: 10px;
  background: url(123.jpg) repeat-x; /*设置背景图像水平重复*/
  width: 80px;
  height: 32px;
  border: 1px solid #f00; /*1px红色实线边框*/
  font-weight: bold; /* 字体加粗*/
  padding-top: 2px;
  cursor: pointer; /*鼠标样式为手型*/
  font-size: 14px;
  color: #fff; /*按钮上的文字颜色为白色*/
}

八、CSS高级属性

1.CSS层叠性

指相同选择器给同一个元素设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。

层叠性原则：

样式冲突：遵循的原则是就近原则，那个样式离结构近，就执行哪个样式。
样式不冲突不会层叠

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=\, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      .one {
        color: blue;
      }
      .two {
        color: red;
      }
    </style>
  </head>
  <body>
    <p class="one tow">朝辞白帝彩云间</p>
    <p>千里江陵一日还</p>
  </body>
</html>

以最后出现的哪个color为基准

2.CSS继承性

指字标签会继承父标签的某些样式，如样本颜色和字号，简单理解就是子承父业。恰当使用可以降低CSS样式的复杂性：

 p,h1,ul,li{color:blue;}
可以写成
body{color:blue;}

因为p，h1，ul，li标签都嵌套在body标签中，是body的子标签，所以只需要在body中定义就行了。但边框属性，外边距属性，内边距属性，背景属性，定位属性，布局属性，元素宽高属性等就不具有继承性。

3.CSS优先级

指当一个元素指定多个选择器时，就会产生优先级，选择器相同，则执行层叠性，选择器不同，则根据选择器权重执行。

各选择器权重：

通配符选择器：0
继承样式：0
标签选择器：1
类选择器：10
ID选择器：100
行内样式：1000
!important命令：无穷大

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      .one {
        color: blue !important;
      }
    </style>
  </head>
  <body>
    <p class="one" style="color: red">朝辞白帝彩云间</p>
  </body>
</html>

虽然行内样式的权重高于类选择器权重，但是!important的权值无穷大

posted @ 2023-03-06 21:07 jesion_wang 阅读(57) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 前端三件套--读书笔记（一）HTML

· 爬虫实战---爬取音乐

· CSS基础语法

· HTML&CSS基础（CSS2）

· Web前端开发：CSS层叠样式表

阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现

公告

昵称： jesion_wang
园龄： 2年5个月
粉丝： 4
关注： 2

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类 (5)

随笔档案 (5)

阅读排行榜

评论排行榜

1. 前端三件套--读书笔记（一）HTML(1)

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

	<head>
	<link rel="stylesheet" href="CSS文件路径" type="text/css">
	</head>

	<style>
	.类名{属性1:属性值1;属性2:属性值2;}
	</style><!--定义在head中-->

	<style>
	.center {
	text-align: center;
	}
	.blue {
	color: blue;
	}
	</style><!--定义在head中-->

	<p class="center blue">你好</p>

	<style>
	#id名{属性1:属性值1;属性2:属性值2;}
	</style><!--定义在head中-->

	<style>
	#font1{font-weight: bold;}
	</style><!--定义在head中-->

	<p id="font1">Hello World</p>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<style type="text/css">
	#green {
	color: green;
	} /id选择器/
	.red {
	color: red;
	} /类选择器/
	#blue {
	color: blue;
	}
	.font1 {
	font-size: 22px;
	}
	p {
	/标签选择器/
	font-family: "黑体";
	text-decoration: underline;
	}
	</style>
	</head>
	<body>
	<h2 id="green">独坐敬亭山</h2>
	<p class="red font1">唐:李白</p>
	<p class="font1">众鸟高飞尽</p>
	<p id="blue">孤云独坐闲</p>
	<p>相看两不厌</p>
	<p>只有敬亭山</p>
	</body>
	</html>

	p{font-family:黑体;}
	<!--也可以同时指定多个字体，中间用逗号隔开，如果字体名称包含空格，则应用引号括起来-->
	p{font-family:Arial,"Times New Roman";}

	@font-face{
	font-family:字体名称;/服务器字体名称/
	src:字体路径; /调用服务器字体的路径/
	}

	<style>
	p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}
	</style>

	@charset "utf-8";
	body {
	font-family: "微软雅黑";
	background-image: url(123.jpg);
	color: white;
	background-repeat: repeat-x; /设置背景图像水平重复/
	background-attachment: fixed; /图像固定在屏幕上，不随页面滚动/
	background-size: 100% 100%; /设置背景图像大小/
	}
	.login {
	margin: 0 auto; /使表单居中/
	width: 280px;
	padding: 14px;
	border: dashed 2px #b7ddf2; /为表单添加边框/
	border-radius: 20px; /为表单添加圆角边框/
	background: rgba(255, 255, 255, 0.1); /为表单添加背景颜色/
	}
	.login * {
	font-family: "宋体";
	font-size: 15px;
	}
	.login h2 {
	/设置标题样式/
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	padding-bottom: 5px;
	border-bottom: solid 1px #b7ddf2; /下边框为1px实线淡蓝色边框/
	}
	.username,
	.password {
	width: 180px;
	height: 18px;
	padding: 2px 0px 2px 18px; /文本框左侧内边距18px，为背景图像预留显示位置/
	margin-bottom: 8px;
	color: #03c; /文本框和密码框内输入文字颜色为蓝色/
	}
	.username {
	background: #fff url(123.jpg) no-repeat left center; /用户名文本框背景图像/
	border: 2px solid blue;
	}
	.password {
	background: #fff url(123.jpg) no-repeat left center; /用户名文本框背景图像/
	border: 2px solid yellow;
	}
	.btns {
	margin-left: 38px;
	margin-top: 10px;
	background: url(123.jpg) repeat-x; /设置背景图像水平重复/
	width: 80px;
	height: 32px;
	border: 1px solid #f00; /1px红色实线边框/
	font-weight: bold; /* 字体加粗*/
	padding-top: 2px;
	cursor: pointer; /鼠标样式为手型/
	font-size: 14px;
	color: #fff; /按钮上的文字颜色为白色/
	}

xiaopixiong

你所在意的，别人无所谓

前端三件套--读书笔记（二）CSS

前端三件套--读书笔记（二）CSS

摘要：

一、CSS的添加方法

1.行内式：

2.嵌入式：

3.链入式：

二、CSS基础选择器

1.标签选择器：

2.类选择器：

3.id选择器：

4.通配符选择器：

5.后代选择器：

6.交集选择器：

7.并集选择器：

三、链接伪类选择器

四、CSS修饰文本

1.设置字体类别：

2.设置字体尺寸：

3.设置字体粗细：

4.设置字体的倾斜

5.设置服务器字体

6.设置文本颜色：

7.设置文本的修饰

8.设置文本的水平对齐方式

9.设置文本缩进：

10.设置行高：

11.设置字符间隔

12.设置文字的截断

13.案例：

五、CSS修饰图像

1.设置图像边框：

2.设置图像的缩放

3.设置背景图像

4.设置背景图像的重复

5.设置背景图像的位置

6.设置背景图像固定

7.设置背景图像的大小

六、CSS修饰表格

1.用CSS设置表格边框合并

2.用CSS设置单元格边框距离

3.隐藏表格中空单元格上的边框

七、CSS修饰表单

八、CSS高级属性

1.CSS层叠性

2.CSS继承性

3.CSS优先级

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类 (5)

随笔档案 (5)

阅读排行榜

评论排行榜

推荐排行榜

最新评论