CSS 的字体属性选择器样式表外观属性

最新推荐文章于 2022-04-17 21:09:05 发布

老酱儿

最新推荐文章于 2022-04-17 21:09:05 发布

阅读量738

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/ybw_2569/article/details/88757268

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

css

css网页的美容师，通称为css样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

样式规则：

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

字体样式属性：font；

font-size属性用于设置字号

font-family属性用于设置字体

font-weight:字体粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。

font-style:字体风格，normal：默认值（正常），italic：斜体，oblique：倾斜

选择器{font: font-style font-weight font-size/line-height font-family;}

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

选择器

标签选择器

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

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式

类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，类选择器最大的优势是可以为元素对象定义单独或相同的样式。

1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器。

3.不要纯数字、中文等命名，尽量使用英文字母来表示。

多类名：我们可以给标签指定多个类名，从而达到更多的选择目的。

样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
各个类名中间用空格隔开。

id选择器

id选择器使用“#”进行标识，后面紧跟id名，该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。用法基本和类选择器相同。

id选择器好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。

通配符选择器

通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如链接伪类选择器，结构(位置)伪类选择器（CSS3)。

链接伪类选择器

:link /* 未访问的链接 */
:visited /* 已访问的链接 */
:hover /* 鼠标移动到链接上 */
:active /* 选定的链接 */

注意写的时候，他们的顺序尽量不要颠倒按照 lvha 的顺序。

结构(位置)伪类选择器（CSS3)

:first-child :选取属于其父元素的首个子元素的指定选择器
:last-child :选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) ：匹配属于其父元素的第 N 个子元素，不论元素的类型
:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n 可以是数字、关键词或公式

:nth-of-type(2n) 可以根据想要的结果进行公式的运算 n=0

CSS复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

交集选择器（了解）

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。交集选择器是并且的意思。即…又…的意思。

并集选择器

并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

并集选择器和的意思，就是说，只要逗号隔开的，所有选择器都会执行后面样式。

后代选择器

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

子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。

伪元素选择器（CSS3)

E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
E::first-line 文本第一行；
E::selection 可改变选中文本的样式；
E::before和E::after 在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素

属性选择器

/* 获取到 拥有 该属性的元素 */
li[type] {
  border: 1px solid gray;
}
/* 获取 属性等于某个值的 元素 属性值 可以使用 引号进行包裹 */
li[type="vegetable"] {
  background-color: green;
}
/* 使用空格分隔的 多个属性 其中有某个属性即可获取 */
li[type~="hot"] {
  font-size: 40px;
}
/* 获取以某个属性开头的语法  */
li[color^='green'] {
  background-color: orange;
}
/* 获取以某个值 结尾的属性 */
li[type$='t']{
  color: hotpink;
  font-weight: 900;
}

/* 获取 属性中 拥有某个值的 元素 */
li[type*=ea] {
  font-size: 100px;
}
/*  如果属性的值 只有very 也能够获取  用来获取 多个属性 并且 使用-连接 */
li[price|='very'] {
  background-color: darkred;
}

西瓜
西兰花
牛肉
猪肉
可乐
雪碧
红酒
白酒

css外观属性

color：文本颜色

1.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。

2.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

line-height：行间距

line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。

line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%。

【可以使px=盒子高度，使文字居中】

text-align:水平对齐方式

left：左对齐（默认值）

right：右对齐

center：居中对齐

text-indent:首行缩进

text-indent属性用于设置首行文本的缩进其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

1em 就是一个字的宽度如果是汉字的段落， 1em 就是一个汉字的宽度

letter-spacing:字间距

letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。

word-spacing:单词间距

word-spacing属性用于定义英文单词之间的间距，对中文字符无效

word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距

颜色半透明(css3)

a alpha 透明度表示为0-1的小数 0 看不见 0.1透明 1不透明
使用： background-color: rgba(255,0,0,0.4);
rgba（）red green blue alpha

文字阴影(CSS3)

以后我们可以给我们的文字添加阴影效果了 Shadow 影子

text-shadow:水平位置垂直位置模糊距离阴影颜色;

前两项是必须写的。后两项可以选写。

css样式表（书写位置）

行内式（内联样式）

是通过标签的style属性来设置元素的样式

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

内部样式表（内嵌式）

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

外部样式表（外链式）

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

注意： link 是个单标签哦!!!

该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：

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

![img](file:///C:\Users\Administrator\AppData\Roaming\Tencent\Users\1453187816\QQ\WinTemp\RichOle\V2AS $_[MY9E64IY%$ V}0TI4.png)

老酱儿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS 的字体属性选择器样式表外观属性

csscss网页的美容师，通称为css样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。样式规则：1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。2.属性和属性值以“键值对”的形式出现。3.属性是对指定的对象设置的样式属性，例如字体大小、文本...
复制链接

扫一扫