01-认识css：css基本选择器以及常见属性（字体属性文本属性等）

于 2022-05-04 19:03:31 发布
阅读量981 收藏 3
点赞数
分类专栏： CSS 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sk142536/article/details/124575401
版权
本文详细介绍了CSS的基础知识，包括CSS的作用、语法规范、选择器的使用（标签选择器、类选择器、ID选择器、通配符选择器）以及常见样式属性如字体、行高、颜色、对齐方式等。文章还讨论了CSS的三种书写方式（行内样式、内嵌样式和外部样式表）及其应用场景，强调了结构与样式相分离的重要性。此外，还涵盖了CSS单位、注释和一些实用技巧，如单行文本垂直居中。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录


致谢：感谢黑马前端和 千古壹号（id： qianguyihao）大佬提供的学习资料。

🚀css概述

css简介

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称，有时我们也会称之为 CSS 样式表或级联样式表。
CSS 是也是一种标记语言
CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

CSS 的重点知识点
盒子模型、浮动、定位

HTML 的缺陷：

  1. 不能够适应多种设备
  2. 要求浏览器必须智能化足够庞大
  3. 数据和显示没有分开
  4. 功能不够强大

CSS 优点：

  1. 使数据和显示分开
  2. 降低网络流量
  3. 使整个网站视觉效果一致
  4. 使开发效率提高了（耦合性降低，一个人负责写 html，一个人负责写 css）

css语法规范

CSS规则由两个主要的部分构成：选择器以及一条或多条声明。
在这里插入图片描述

  1. 选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
  2. 属性和属性值以“键值对”的形式出现
  3. 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
  4. 属性和属性值之间用英文“:”分开
  5. 多个“键值对”之间用英文“;”进行区分

所有的样式，都包含在 <style> 标签内，表示是样式表。<style> 一般写到 </head> 上方

<head>
    <style>
        /* 选择器 {样式} */
        /* 给谁改样式 { 改什么样式} */
        p {
            color: red;
            /* 修改了文字大小为100像素 */
            font-size: 100px;  
        }
    </style>
</head>

属性值前面，冒号后面，保留一个空格
选择器（标签）和大括号中间保留空格

css 代码的注释

格式：

<style type="text/css">
    /*
		具体的注释
	*/

    p {
        font-weight: bold;
        font-style: italic;
        color: red;
    }
</style>

注意：CSS 只有/* */这种注释，没有//这种注释。而且注释要写在<style>标签里面才算生效。

css 怎么学？CSS 有两个知识部分：
1） 选择器，怎么选；
2） 属性，样式是什么

CSS的单位

html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。
CSS中的单位是必须要写的，因为它没有默认单位。

绝对单位

1 in=2.54cm=25.4mm=72pt=6pc。

各种单位的含义：

  • in：英寸Inches (1 英寸 = 2.54 厘米)
  • cm：厘米Centimeters
  • mm：毫米Millimeters
  • pt：点Points，或者叫英镑 (1点 = 1/72英寸)
  • pc：皮卡Picas (1 皮卡 = 12 点)

相对单位

px：像素
em：印刷单位相当于12个点
%：百分比，相对周围的文字的大小

为什么说像素px是一个相对单位呢，这也很好理解。比如说，电脑屏幕的的尺寸是不变的，但是我们可以让其显示不同的分辨率，在不同的分辨率下，单个像素的长度肯定是不一样的啦。

百分比%这个相对单位要怎么用呢？这里也举个例子：

在这里插入图片描述

CSS 的书写方式

CSS 的书写方式，实就是问你 CSS 的代码放在哪个位置。CSS 代码理论上的位置是任意的，但通常写在<style>标签里。

CSS 的书写方式有三种：

  1. 行内样式：在某个特定的标签里采用 style 属性。范围只针对此标签。

  2. 内嵌样式（内联样式）：在页面的 head 标签里里采用<style>标签。范围针对此页面。

  3. 外链样式：引入外部样式表 CSS 文件。这种引入方式又分为两种：

    • 3.1 采用<link>标签。例如：<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
    • 3.2 采用 import 导入，必须写在<style>标签中。然后用类似于@import url(a.css) ;这种方式导入。

1、行内样式

采用 style 属性。范围只针对此标签适用。

该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。

举例：

<p style="color:white;background-color:red">我不会就这样轻易的狗带</p>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WcdhdGCL-1651661638153)(./css_basicimages/01-行内样式.png)]

  1. style 其实就是标签的属性，在双引号中间，写法要符合 CSS 规范
  2. 可以控制当前的标签设置样式
  3. 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用

2、内嵌样式表

在 head 标签中加入<style>标签，对多个标签进行统一修改，范围针对此页面。

该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。

举例：

<style type="text/css">
    p {
        font-weight: bold;
        font-style: italic;
        color: red;
    }
</style>

<body>
    <p>洗白白</p>
    <p style="color:blue">你懂得</p>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xnCtLzPH-1651661638153)(./css_basicimages/01-内嵌样式.png)]

  1. <style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签中
  2. 通过此种方式，可以方便控制当前整个页面中的元素样式设置
  3. 代码结构清晰，但是并没有实现结构与样式完全分离

3、引入外部样式表 css 文件

引入样式表文件的方式又分为两种：

  • （1）采用<link>标签。例如：<link rel = "stylesheet" type = "text/css" href = "a.css"></link>

  • （2）采用 import，必须写在<style>标签中，并且必须是第一句。例如：@import url(a.css) ;

两种引入样式方式的区别：外部样式表中不能写标签，但是可以写 import 语句。

具体操作如下：

我们先在 html 页面的同级目录下新建一个a.css文件，那说明这里面的代码全是 css 代码，此时就没有必要再写<style>标签这几个字了。
a.css的代码如下：

p {
    border: 1px solid red;
    font-size: 40px;
}

上方的 css 代码中，注意像素要带上 px 这个单位，不然不生效。
然后我们在 html 文件中通过<link>标签引入这个 css 文件就行了。效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-99S70LhO-1651661638154)(./css_basicimages/01-外部引入样式.png)]

补充的知识：<link>标签的 rel 属性：。其属性值有以下两种：

  • stylesheet：定义的样式表
  • alternate stylesheet：候选的样式表

看字面意思可能比较难理解，我们来举个例子，一下子就明白了。
举例：

现在我们来定义 3 个样式表：

a.css：定义一个实线的黑色边框

div {
    width: 200px;
    height: 200px;
    border: 3px solid black;
}

ba.css：蓝色的虚线边框

div {
    width: 200px;
    height: 200px;
    border: 3px dotted blue;
}

c.css：来个背景图片

div {
    width: 200px;
    height: 200px;
    border: 3px solid red;
    background-image: url('1.jpg');
}

然后我们在 html 文件中引用三个样式表：

  <link rel = "stylesheet" type = "text/css" href = "a.css"></link>
  <link rel = "alternate stylesheet" type = "text/css" href = "b.css" title="第二种样式"></link>
  <link rel = "alternate stylesheet" type = "text/css" href = "c.css" title="第三种样式"></link>

上面引入的三个样式表中，后面两个样式表作为备选。注意备选的样式表中，title 属性不要忘记写，不然显示不出来效果的。现在来看一下效果：（在 IE 中打开网页）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-22nWGKac-1651661638156)(./css_basicimages/01-外部引入样式1.gif)]

为了便于理解css和入门，先来了解一下css中的选择器

🚀css基础选择器

基础选择器包括：

  1. 标签选择器：针对一类标签
  2. 类选择器：针对某一个特定的标签使用
  3. id 选择器：针对你想要这个标签具有一系列效果（避免重复定义效果）
  4. 通配符选择器：针对所有的标签都适用（不建议使用）

标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。
语法：

标签选择器{
    属性：属性值
    ...
}

作用：
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。

举例：

p{ font-size:14px; }

上方选择器的意思是说：所有的<p>标签里的内容都将显示 14 号字体。

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WgEny7dL-1651661638157)(./css_basicimages/01-标签选择器.png)]

【总结】需要注意的是：

（1）所有的标签，都可以是选择器。比如 ul、li、label、dt、dl、input。

（2）无论这个标签藏的多深，一定能够被选择上。

（3）选择的所有，而不是一个。

类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器.

语法：

.类名 {
    属性1: 属性值1;  
    ...
} 
调用方式
<div class="类名"> 类名选择器改变样式 </div>
  1. 如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
  2. 类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。
  3. 类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。
  4. 长名称或词组可以使用中横线来为选择器命名。
  5. 不要使用纯数字、中文等命名，尽量使用英文字母来表示，命名要有意义，尽量使别人一眼就知道这个类名的目的。

举例如下：

.one { 
    width:800px;
    font-size:20px
    }

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NpAwrtgK-1651661638158)(./css_basicimages/01-类选择器.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器的使用</title>
    <style>
        .red {
            width: 100px;
            height: 100px;
            /* 背景颜色 */
            background-color: red;
        }
        .blue {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="red">红色</div>
    <div class="blue">蓝色</div>
    <div class="red">红色</div>
</body>
</html>

多类名选择器

任何标签都可以携带 id 属性和 class 属性。class 属性的特点：

  • 特性 1：类选择器可以被多种标签使用。

  • 特性 2：同一个标签可以使用多个类选择器。用空格隔开。我们可以给一个标签指定多个类名，赋予这个标签更多样式。

多类名的调用方式：

<div class="red font20">多类名选择器的使用</div>

注意：
在标签class 属性中写 多个类名，多个类名中间必须用空格分开，这个标签就可以分别具有这些类名的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多类名选择器的使用</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            font-size: 30px;
        }
        .red {
            /* 背景颜色 */
            background-color: red;
        }
        .green {
           
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box red">红盒子</div>
    <div class="box green">绿盒子</div>
</body>
</html>

多类名选择器说明：

（1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同完成这个标签的样式。

（2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。
语法：

    #id名 {
    属性1: 属性值1;  
    ...
    } 
    /* 调用： */
    <div id="id名">id选择器的调用</div>

举例：

#mytitle { border:3px dashed green; }

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bG68rR9H-1651661638159)(./css_basicimages/01-id选择器.png)]

注意：
任何的 HTML 标签都可以有 id 属性。表示这个标签的名字。这个标签的名字，可以任取，但是：

  • （1）只能有字母、数字、下划线。
  • （2）必须以字母开头。
  • （3）不能和标签同名。比如 id 不能叫做 body、img、a。
  • （4）id 属性只能在每个 HTML 文档中出现一次，id属性就是id名
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        /* id选择器只能调用一次, 别人切勿使用 */
      #red {
          color: red;
      }
    
    </style>
</head>
<body>
    <div id="red">id选择器的调用</div>
    <div>我不能调用id选择器</div>
</body>
</html>

一个标签可以被多个 css 选择器选择：

我们可以同时让标签选择器和 id 选择器作用于同一个标签。但是这会涉及到选择器的优先级问题，这个问题我们后续会讲。

id选择器和类选择器的区别：

  1. 类选择器（class）好比人的名字，一个名字也可以被多个人使用。
  2. id 选择器好比人的身份证号码，全中国是唯一的，不得重复。
  3. id 选择器和类选择器最大的不同在于使用次数上。
  4. 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

用 id 还是用 class？

答案：尽可能的用 class，除非极特殊的情况可以用 id。

原因：id 是 js 用的。也就是说，js 要通过 id 属性得到标签，所以 css 层面尽量不用 id，要不然 js 就很别扭。另一层面，我们会认为一个有 id 的元素，有动态效果。

通配符选择器

通用选择器，将匹配任何标签。不建议使用，IE 有些版本不支持，大网站增加客户端负担。

语法：
    * {
        属性1: 属性值1;  
        ...
    }

通配符选择器不需要调用， 自动就给所有的元素使用样式，特殊情况才使用，比如：清除所有的元素标签的内外边距

 * {
        margin: 0;
        padding: 0;
    }

选择器总结

基础选择器作用特点使用情况用法
标签选择器可以选出所有相同的标签不能差异化选择较多p {color: red;}
类选择器可以选出一个或多个标签可以根据需求选择非常多.red {color: red}
id选择器一次只能选择一个标签id属性只能在每个HTML文档中出现一次一般和js搭配#red {color: red}
通配符选择器选择所有的标签选择标签多特殊情况使用* {margin: 0}

🚀css常见属性

font 字体属性

CSS中，有很多非布局样式（与布局无关），包括：字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性（粗体、斜体、下划线）等。

css样式中，常见的字体属性有以下几种：

p{
	font-size: 50px; 		/*字体大小*/
	line-height: 30px;      /*行高*/
	font-family: 幼圆,黑体; 	/*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
	font-style: italic ;		/*italic表示斜体，normal表示不倾斜*/
	font-weight: bold;	/*粗体*/
	font-variant: small-caps;  /*小写变大写*/
}

行高

CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。

如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xGg0Nc6x-1651661638159)(./css_basicimages/01-行高.png)]

上图中，我们设置行高为30px，30px * 5 = 150px，通过查看审查元素，这个p标签的高度果然为150px。而且我们发现，我们并没有给这个p标签设置高度，显然是内容将其撑高的。

垂直方向来看，文字在自己的行里是居中的。比如，文字是14px，行高是24px，那么padding就是5px：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cWWHoKJ3-1651661638160)(./css_basicimages/01-行高1.png)]

为了严格保证字在行里面居中，我们的工程师有一个约定： 行高、字号，一般都是偶数。这样可以保证，它们的差一定偶数，就能够被2整除。

如何让单行文本垂直居中（重要）

小技巧：如果一段文本只有一行，如果此时设置行高 = 盒子高，就可以保证单行文本垂直居中。这个很好理解。

上面这个小技巧，只适用于单行文本垂直居中，不适用于多行。如果想让多行文本垂直居中，还需要计算盒子的padding。计算方式如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WN4XMh0d-1651661638161)(./css_basicimages/01-行高2.png)]

vertical-align: middle; 属性

vertical-align属性可用于指定行内元素（inline）、行内块元素（inline-block）、表格的单元格（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。

代码举例：

vertical-align: middle; /*指定行级元素的垂直对齐方式。*/

字体大小：

CSS 使用 font-size 属性定义字体大小。
语法：

p {  
    font-size: 20px; 
}
  1. px（像素）大小是我们网页的最常用的单位
  2. 谷歌浏览器默认的文字大小为16px
  3. 不同浏览器可能默认显示的字号大小不一致，尽量给一个明确的大小，不要默认大小
  4. 可以给 body 指定整个页面文字的大小

字体粗细：

CSS 使用 font-weight 属性设置文本字体的粗细。

语法：
p {
font-weight: bold;
}

属性值描述
normal默认值（不加粗的）
bold定义粗体（加粗的）
100-900400等于mormal，700等同于bold，数字后面没有单位
  1. 学会让加粗标签（比如 h 和 strong 等) 不加粗，或者其他标签加粗
  2. 实际开发时，我们更喜欢用数字表示粗细

字体样式：

CSS 使用 font-style 属性设置文本的风格。
语法：

p {  
    font-style: normal;
}
属性值作用
normal默认值，浏览器会显示标准的字体样式 font-style:normal
italic浏览器会显示斜体的字体样式

字体

字体属性的说明：

1、网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装，比如你设置：

	font-family: "华文彩云";

上方代码中，如果用户的 Windows 电脑里面没有这个字体，那么就会变成宋体。

页面中，中文我们一般使用：微软雅黑、宋体、黑体。英文使用：Arial、Times New Roman。页面中如果需要其他的字体，就需要单独安装字体，或者切图。

2、为了防止用户电脑里，没有微软雅黑这个字体。就要用英语的逗号，提供备选字体。如下：（可以备选多个）

	font-family: "微软雅黑","宋体";

上方代码表示：如果用户电脑里没有安装微软雅黑字体，那么就是宋体。

3、我们须将英语字体放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体：

	font-family: "Times New Roman","微软雅黑","宋体";

上方代码的意思是，英文会采用Times New Roman字体，而中文会采用微软雅黑字体（因为美国人设计的Times New Roman字体并不针对中文，所以中文会采用后面的微软雅黑）。比如说，对于smyhvae哈哈哈这段文字，smyhvae会采用Times New Roman字体，而哈哈哈会采用微软雅黑字体。

可是，如果我们把中文字体写在前面：(错误写法)

	font-family: "微软雅黑","Times New Roman","宋体";

上方代码会导致，中文和英文都会采用微软雅黑字体。

4、所有的中文字体，都有英语别名。

微软雅黑的英语别名：

	font-family: "Microsoft YaHei";

宋体的英语别名：

	font-family: "SimSun";

于是，当我们把字号、行高、字体这三个属性合二为一时，也可以写成：

	font:12px/30px  "Times New Roman","Microsoft YaHei","SimSun";

5、行高可以用百分比，表示字号的百分之多少。

一般来说，百分比都是大于100%的，因为行高一定要大于字号。

比如说， font:12px/200% “宋体”等价于font:12px/24px “宋体”。200%可以理解成word里面的2倍行高。

反过来， font:16px/48px “宋体”;等价于font:16px/300% “宋体”。

字体的综合写法

字体属性可以把文字样式综合来写, 这样可以更节约代码:

body { font: font-style  font-weight  font-size(必须)/line-height（行高）  font-family(必须);}

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开 不需要设置的属性可以省略（取默认值），但必须保留 font-size(字号) 和 font-family(字体) 属性，否则 font 属性将不起作用

字体总结：

属性表示注意点
font-style字体样式斜体italic
font-weight字体粗细400等于mormal，700等同于bold，数字后面没有单位
font-size字号常用单位为px，一定要加单位
font-family字体按照要求定义
font字体连写字体连写有顺序，字号和字体是必须的属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS字体属性</title>
    <style>
       /* div标签内的文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑 */
       div {
           /* font-style: italic;
           font-weight: 700;
           font-size: 16px;
           font-family: 'Microsoft yahei'; */
           /* 复合属性: 简写的方式  节约代码 */
           /* font: font-style  font-weight  font-size/line-height  font-family; */
           /* font: italic 700 16px 'Microsoft yahei'; */
           font: 20px '黑体';
       }
    </style>
</head>
<body>
   <div>字体综合练习</div>
</body>
</html>

上面这几个属性可以连写，但是有一个要求，font属性连写至少要有字号和字体，否则连写是不生效的（相当于没有这一行代码）。

文本属性

CSS样式中，常见的文本属性有以下几种：

  • letter-spacing: 0.5cm ; 单个字母之间的间距
  • word-spacing: 1cm; 单词之间的间距
  • text-decoration: none; 字体修饰：none 去掉下划线、underline 下划线、line-through 中划线、overline 上划线
  • color:red; 字体颜色
  • text-align: center; 在当前容器中的对齐方式。属性值可以是：left、right、center（在当前容器的中间）、justify
  • text-transform: lowercase; 单词的字体大小写。属性值可以是：uppercase（单词大写）、lowercase（单词小写）、capitalize（每个单词的首字母大写）

简单介绍以下几种：

文本颜色：

color 属性用于定义文本的颜色。
语法：

div { 
    color: red;
}
颜色表示属性值
预定义的颜色值red、green、blue等
十六进制#FF000 #FF6600
RGB代码rgb(255,0,0)或rgb(100%,0%,0%)

开发中最常用的是十六进制

文本对齐：

text-align 属性用于设置元素内文本内容的水平对齐方式。
语法：

div { 
    text-align: center;
}
属性值作用
left左对齐（默认值）
right右对齐
center居中对齐

修饰文本

语法：
 div { 
    text-decoration：underline；
 }
属性值作用
none默认没有装饰线（最常用）
underline下划线，链接a自带下划线（常用）
overline上划线（几乎不用）
line-through删除线（不常用）

重点记住如何添加下划线 如何删除下划线 其余了解即可。

文本缩进

语法：
    div { 
        text-indent：20px；
    }
    div { 
        text-indent：2em；
    }

em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。

具体的文本属性见W3C：
在这里插入图片描述

列表属性

ul li{
	list-style-image:url(images/2.gif) ;  /*列表项前设置为图片*/
	margin-left:80px;  /*公有属性*/
}

另外还有一个简写属性叫做list-style，它的作用是：将列表属性写在一个声明中。

我们来看一下list-style-image属性的效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IDlOeZQW-1651661638163)(./css_basicimages/01-列表属性.png)]

W3C列表属性：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M6O2h6LF-1651661638163)(./css_basicimages/01-列表属性1.png)]

overflow属性：处理超出容器的内容

overflow属性的属性值可以是：

  • visible：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
  • hidden：不显示超过对象尺寸的内容。
  • auto：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条。
  • scroll：Windows 平台下，无论内容是否超出，总是显示滚动条。Mac 平台下，和 auto 属性相同。

针对上面的不同的属性值，我们来看一下效果：
举例：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>

	<style type="text/css">

		div{
			width: 100px;
			height: 100px;
			background-color: #00cc66;
			margin-right: 100px;
			float: left;
		}

		#div1{
			overflow: auto;/*超出的部分让浏览器自行解决*/
		}
		#div2{
			overflow: visible;/*超出的部分会显示出来*/
		}

		#div3{
			overflow: hidden;/*超出的部分将剪切掉*/
		}

	</style>

 </head>

 <body>

	<div id="div1">其实很简单 其实很自然 两个人的爱由两人分担 其实并不难 是你太悲观 隔着一道墙不跟谁分享 不想让你为难 你不再需要给我个答案</div>
	<div id="div2">其实很简单 其实很自然 两个人的爱由两人分担 其实并不难 是你太悲观 隔着一道墙不跟谁分享 不想让你为难 你不再需要给我个答案</div>
	<div id="div3">其实很简单 其实很自然 两个人的爱由两人分担 其实并不难 是你太悲观 隔着一道墙不跟谁分享 不想让你为难 你不再需要给我个答案</div>
 </body>

</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AyGY67Z0-1651661638164)(./css_basicimages/01-overflow属性.png)]

鼠标的属性 cursor

鼠标的属性cursor有以下几个属性值：

  • auto：默认值。浏览器根据当前情况自动确定鼠标光标类型。
  • pointer：IE6.0，竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
  • hand：和pointer的作用一样：竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。

比如说，我想让鼠标放在那个标签上时，光标显示手状，代码如下：

p:hover{
	cursor: pointer;
}

另外还有以下的属性：（不用记，需要的时候查一下就行了）

  • all-scroll :　 IE6.0 有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。
  • col-resize :　 IE6.0 有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。
  • crosshair :　 简单的十字线光标。
  • default :　 客户端平台的默认光标。通常是一个箭头。
  • hand :　 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
  • move :　 十字箭头光标。用于标示对象可被移动。
  • help :　 带有问号标记的箭头。用于标示有帮助信息存在。
  • no-drop :　 IE6.0 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。
  • not-allowed :　 IE6.0 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。
  • progress :　 IE6.0 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。
  • row-resize :　 IE6.0 有上下两个箭头，中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。
  • text :　 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。
  • vertical-text :　 IE6.0 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。
  • wait :　 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。
  • *-resize :　 用于标示对象可被改变尺寸方向的箭头光标。
  • w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize
  • url ( url ) :　 IE6.0 用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值