【Web开发手礼】探索Web开发的魅力（四）-CSS样式定义方式、选择器、颜色、文本.、字体（1）

程序猿零零漆

于 2024-07-13 06:30:00 发布

阅读量290

点赞数 18

分类专栏： Web应用文章标签：前端 css

本文链接：https://blog.csdn.net/m0_63267251/article/details/140387494

版权

Web应用专栏收录该内容

4 篇文章 0 订阅

订阅专栏

主要是css的样式定义方式、选择器、颜色、文本、字体的主要内容，可以当作平常的日常学习笔记收藏一下！！！

前言

样式定义方式

行内样式表（inline style sheet）

内部样式表（internal style sheet）

外部样式表（external style sheet）

前言

主要是css的样式定义方式、选择器、颜色、文本、字体的主要内容，可以当作平常的日常学习笔记收藏一下！！！

提示：以下是本篇文章正文内容，下面案例可供参考

样式定义方式

行内样式表（inline style sheet）

作用范围：仅对当前标签产生影响。

例如：

<img src="/images/mountain.jpg" alt="" style="width: 300px; height: 200px;">

内部样式表（internal style sheet）

定义在style标签中，通过选择器影响对应的标签。

作用范围：可以对同一个页面中的多个元素产生影响。

外部样式表（external style sheet）

定义在css样式文件中，通过选择器影响对应的标签。可以用link标签引入某些页面。

作用范围：可以对多个页面产生影响。

注释

注意不能使用//。
只有：

/* 注释 */

选择器

标签选择器

选择所有div标签：

div {
    width: 200px;
    height: 200px;
    background-color: gray;
}

ID选择器

选择ID为rect-1的标签：

#rect-1 {
    width: 200px;
    height: 200px;
    background-color: gray;
}

类选择器

选择所有rectangle类的标签：

.rectangle {
    width: 200px;
    height: 200px;
    background-color: gray;
}

伪类选择器

伪类用于定义元素的特殊状态。

链接伪类选择器：

:link：链接访问前的样式
:visited：链接访问后的样式
:hover：鼠标悬停时的样式
:active：鼠标点击后长按时的样式
:focus：聚焦后的样式

.effect:hover{
    transform: scale(1.2) ;
    /*
    鼠标悬停后放大为1.2倍
    */

    /*渐变时间*/
    transition: 200ns;
}

位置伪类选择器：

:nth-child(n)：选择是其父标签第n个子元素的所有元素。

目标伪类选择器：

:target：当url指向该元素时生效。

复合选择器

由两个及以上基础选择器组合而成的选择器。

element1, element2：同时选择元素element1和元素element2。
element.class：选则包含某类的element元素。
element1 + element2：选择紧跟element1的element2元素。
element1 element2：选择element1内的所有element2元素。
element1 > element2：选择父标签是element1的所有element2元素。

通配符选择器

*：选择所有标签
[attribute]：选择具有某个属性的所有标签
[attribute=value]：选择attribute值为value的所有标签

伪元素选择器

将特定内容当做一个元素，选择这些元素的选择器被称为伪元素选择器。

::first-letter：选择第一个字母
::first-line：选择第一行
::selection：选择已被选中的内容
::after：可以在元素后插入内容
::before：可以在元素前插入内容

样式渲染优先级

权重大小，越具体的选择器权重越大：!important > 行内样式 > ID选择器 > 类与伪类选择器 > 标签选择器 > 通用选择器
权重相同时，后面的样式会覆盖前面的样式
继承自父元素的权重最低

颜色

预定义的颜色值

black、white、red、green、blue、lightblue等。

16进制表示法

使用6位16进制数表示颜色，例如：#ADD8E6。
其中第1-2位表示红色，第3-4位表示绿色，第5-6位表示蓝色。

简写方式：#ABC，等价于#AABBCC。

RGB表示法

rgb(173, 216, 230)。

其中第一个数表示红色，第二个数表示绿色，第三个数表示蓝色。

RGBA表示法

rgba(173, 216, 230, 0.5)。

前三个数同上，第四个数表示透明度。

取色方式

网页里的颜色，可以在chrome的调试模式下获取
其他颜色可以使用QQ的截图软件：
直接按c键，可以复制rgb颜色值
按住shift再按c键，可以复制16进制颜色值

文本

text-align

text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。

line-height

line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。

补充知识点：长度单位

单位	描述
px	设备上的像素点
%	相对于父元素的百分比
em	相对于当前元素的字体大小
rem	相对于根元素的字体大小
vw	相对于视窗宽度的百分比
vh	相对于视窗高度的百分比

letter-spacing

CSS 的 letter-spacing 属性用于设置文本字符的间距。

text-indent

text-indent属性能定义一个块元素首行文本内容之前的缩进量。

text-decoration

text-decoration 这个 CSS 属性是用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线或闪烁）它是 text-decoration-line, text-decoration-color, text-decoration-style, 和新出现的 text-decoration-thickness 属性的缩写。