CSS知识点汇总（第一篇）

最新推荐文章于 2022-11-04 23:36:00 发布

沐曦可期

最新推荐文章于 2022-11-04 23:36:00 发布

阅读量667

点赞数 1

文章标签： css css3 前端 javascript

本文链接：https://blog.csdn.net/qq_62714412/article/details/122624237

版权

css样式规则：

选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

注意：

1、选择器用于CSS样式作用指定的标签，并且严格区分大小写，而属性和属性值不区分大小写；

2、最后一个分号可省略，不影响（但为了拓展的方便，减少失误，最好不要省略）；

3、如果属性值中间包含多个空格，则必须为属性值加上双引号；

4、注释语句为/* 注释 */ ;

5、符号都为英文符号；

引入CSS样式表：

1、行内式：通过标签的style属性来设置元素的样式，基本语法如下：

<标签名 style = "属性1：属性值1；属性2：属性值2；属性3：属性值3；"> 内容 </标签名>

2、内嵌式：将CSS代码集中写在HTML文档的<head>头部标签中，并用<style>标签定义，其基本语法格式如下：

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

3、链入式：将所有样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link/>标签将外部样式表文件链接到HTML文档中，基本语法如下：

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

4、导入式：针对外部样式表文件，对HTML头文档应用style标签，并在<style>标签内的开头处使用@import语句，即可导入外部样式表文件，基本语法如下：

<style type="text/css">
    @import url(CSS路径); 或 @import"css文件路径"；
        /* 在此还可存放其他css样式*/
   </style>

CSS的基础选择器：

1.标签选择器：指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式，其基本语法如下：（优点：快速定义全部的同类标签，例如<p>）

标签名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

2.类选择器：使用“.”（英文点号）进行识别，后面紧跟类名，(一个标签允许有多个类)其基本语法为：

.类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

例如：

.b{ font-size : 40; color:blue;}
.
.
.
<p class="b c">段落文本2</p>

3.id选择器：使用“#”（英文点号）进行识别，后面紧跟id名，（类似于类选择器，区别是一个标签只能有一个id）其基本语法为：

#id名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

4.通配符选择器：用"*"号表示，是所有选择器中作用范围最广的，能匹配页面中所有的元素。（一般用于清除浏览器默认边距设置等）其基本语法为：

*{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

CSS字体样式属性

font-size : 设置字号。（相对单位：px 像素绝对单位：in 英寸 cm 厘米 pt 点）

font-family:设置字体。（中文字体和中间有空格的字体需要用双引号括起来）

font-weight:定义字体粗细。（normal 默认值 bold 粗体字符 bolder 更粗字符 lighter 更细字符取100~900之间的任意整数【400==normal 700==bold 值越大字体越粗】）

font-style:定义字体风格。（normal 默认值， italic 斜体， oblique 将字体倾斜显示）

font综合属性：用于综合设置字体样式，即上面四种都可。（注意：一定要同时设置字号大小和字体，否则没有用例如：font:36px "微软雅黑"）

@font-face属性：定义服务器字体。演示：@font-face{font-family:字体名称; src:字体路径;}

CSS文本外观属性

color：1.预定义颜色值（如red,green,blue等）;

2.十六进制#ff0000；

3.RGB代码：rgb(100%,0%,0%)。

letter-spacing：定义字间距，所谓字间距就是字符与字符之间的空白，允许为负值，默认为normal.

word-spacing：定义英文单词之间的间距，对中文字符无效，允许为负值，默认为normal（英文单词用空格隔开，否则会认为是一个字母）。

line-height:行间距。常见单位为像素px,相对值em 和百分比%.一般用px

text-align:用于设置文本内容水平对齐，可用属性包括left,right和center.(1、该属性仅适用于块级元素，对行内元素无效；2、如果需要对图像设置水平对齐，可以为图像添加一个父标签，如<p>,然后对父标签应用text-align属性)

text-transgorm:用于控制英文字符的大小写。（可用属性如下： none不转换(默认值), capitalize 首字母大写， uppercase 全部字符转换为大写，lowercase 全部字符转换为小写）。

text-decoration: 用于设置文本的下划线，上划线，删除线等装饰效果。（可用属性如下： none没有装饰(正常文本默认值)，underline 下划线， overline 上划线， line-through 删除线）-->超链接经常用到下划线（可以一次性添加多个值：text-decoration:line-through underline overline;）

text-indent:用于设置首行文本的缩进。（可用数值，em字符宽度的倍率或相对于浏览器窗口宽度的百分比%，允许使用负值），多使用2em.

white-space: 设置空白符的处理方式（属性值如下：

1、normal(默认值)，文本中的空格，空行无效，满行后自动换行

2、pre：预格式化，就是保留原格式，但不会换行，若超出会自动增加滚动条

      3、nowrap:空行空格无效，除非有<br>,内容超出边界也不换行，若超出会自动增加滚动条。）

text-shadow: 可以为页面中的文本添加阴影效果。（h-shadow用于设置水平阴影距离，v-shadow用于设置垂直阴影距离，blur用于设置模糊半径，color用于设置阴影颜色）

text-overflow:用于处理溢出的文本。（1、clip:修剪溢出文本，不显示省略标签“...” ;
2、ellipsis: 用省略标签"..."代替被修剪的文本，省略标签插入的位置是最后一个字符）

较长文本只用一行较美观的显示组合拳：
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

word-wrap:用于实现长单词和URL地址的自动换行。（1、normal：只在允许的断字点换行（浏览器保持默认处理） 2、break-word:在长单词或URL地址内部进行换行。）