了解CSS

最新推荐文章于 2024-08-02 20:11:41 发布

m0_48109829

最新推荐文章于 2024-08-02 20:11:41 发布

阅读量78

点赞数

文章标签： html

本文链接：https://blog.csdn.net/m0_48109829/article/details/129206626

版权

基本语法规范

选择器 + {一条/N条声明}
选择器决定针对谁修改 (找谁)
声明决定修改啥
声明的属性是键值对，使用 “;’” 区分键值对, 使用 “:” 区分键和值

CSS不区分大小写

/* CSS的注释只有这一种形式 */

<style>
p {
/* 设置字体颜色 */
color: red;
/* 设置字体大小 */
font-size: 30px;
}
</style>
<p>hello</p>

引入方式

内部样式表

写在 style 标签中, 嵌入到 html 内部。理论上style放到html的哪里都行，但一般放到 head 标签中。

    <div>这是红色</div>
    <p style="color : orange">这是橙色</p>

行内样式表

通过 style 属性, 来指定某个标签的样式，只适合于写简单样式，只针对某个标签生效。

<style>
div {
color: red;
}
</style>
<div style="color:green">这是绿色</div>
<div >这是绿色</div>

red被覆盖了

外部样式

实际开发中最常用的方式.
1. 创建一个 css 文件
2. 使用 link 标签引入 css [快捷键 link:css + Tab]

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="CSS/style.css">
</head>
<body>
    <div>这是红色</div>
</body>

优点: 样式和结构彻底分离了。
缺点: 受到浏览器缓存影响, 修改之后不一定立刻生效。

如果三种引入方式的规则冲突了，以谁为准？

内联样式是具体作用到一个具体元素上的，所以优先级最高。
内部。外部样式看先后顺序，后出现的覆盖先出现的。

选择器

选择器规则

除了用在CSS上，还可以用在JS选择元素上。

选择器的种类

基础选择器: 单个选择器构成的

标签选择器 p { ... }
类选择器 .red { ... } 通过类选择器可以选出多个元素
id 选择器 #ha { color: red; } 选中id为ha的元素 id 是唯一的不能被多个标签使用
通配符选择器 * { ... } 页面的所有内容都会被改成红色，不需要被页面结构调用

选择器之间的优先级规则

选择越精确的，优先级越高。

同样优先级的情况下，谁出现在上面，谁被覆盖。

复合选择器: 把多种基础选择器综合运用起来.

后代选择器 元素1 元素2 { ... }

子选择器 元素1 > 元素2 { ... }

并集选择器 元素1, 元素2 { ... }

伪类选择器

1.链接伪类选择器：正对某些元素的一些状态进行选择
a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)
注意：
按照 LVHA 的顺序书写, 例如把 active 拿到前面去, 就会导致 active 失效. 记忆规则 "绿化"
浏览器的 a 标签都有默认样式, 一般实际开发都需要单独制定样式.
实际开发主要给链接做一个样式, 然后给 hover 做一个样式即可. link, visited, active 用的不多

如何让一个已经被访问过的链接恢复成未访问的状态?
清空浏览器历史记录即可. ctrl + shift + delete

2.force 伪类选择器：选取获取焦点的 input 表单元素

<div class="three">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>

.three>input:focus {
color: red;
}

选中前选中后被选中的表单的字体就会变成红色

常用元素属性

字体属性

设置字体 font-family

字体大小 dont-size

字体粗细 font-weight

文字样式 em / i

/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;

<div class="font-family">
    <div class="one">
        这是微软雅黑
    </div>
    <div class="two">
        这是宋体
    </div>
--------------------------
.font-family .one {
font-family: 'Microsoft YaHei';
}
.font-family .two {
font-family: '宋体';
font-size: 20px;
font-style: italic;
}

文本属性

文本颜色 3种写法

color: red;
color: #ff0000;
color: rgb(255, 0, 0);

文本对齐 text-align: [值];

center: 居中对齐
left: 左对齐
right: 右对齐

文本装饰：text-decoration: [值];

underline 下划线. [常用]
none 啥都没有. 可以给 a 标签去掉下划线.
overline 上划线. [不常用]
line-through 删除线 [不常用]

文本缩进：text-indent: [值];

单位可以使用 px 或者 em.
使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.
缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)

行高：上下文本行之间的基线距离。

行高 = 上边距 + 下边距 + 字体大小
行高可以取 normal 等值
行高等与元素高度, 就可以实现文字居中对齐

背景属性

背景颜色：background-color: [指定颜色]，默认透明（transparent）

背景图片：background-image: url(...);

url 可以是绝对路径, 也可以是相对路径
url 上可以加引号, 也可以不加.

背景平铺：background-repeat: [平铺方式]；默认是repeat

repeat: 平铺
no-repeat: 不平铺
repeat-x: 水平平铺
repeat-y: 垂直平铺
背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方

背景位置：background-position: x y;

修改图片的位置参数有三种风格:
1. 方位名词: (top, left, right, bottom)
2. 精确单位: 坐标或者百分比(以左上角为原点)
3. 混合单位: 同时包含方位名词和精确单位

如果参数的两个值都是方位名词, 则前后顺序无关(top left 和 left top 等效)
如果只指定了一个方位名词, 则第二个默认居中 (left 则意味着水平居中, top 意味着垂直居中)
如果参数是精确值, 则的的第一个肯定是 x , 第二个肯定是 y(100 200 意味着 x 为 100, y 为 200)
如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中
如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100, 垂直居中)
计算机中的平面坐标系

背景尺寸：background-size: length | percentage | cover | contain;

可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
也可以填百分比: 按照父元素的尺寸设置.
cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
contain 和 cover 当元素为矩形(不是正方形) 时, 区别是很明显的

圆角矩形

border-radius: length ; length 是内切圆的半径. 数值越大, 弧线越强烈。

border-radius:2em;
等价于(按照顺时针排列)
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;