HTML之CSS学习

最新推荐文章于 2024-08-01 09:59:14 发布

象希声

最新推荐文章于 2024-08-01 09:59:14 发布

阅读量135

点赞数

文章标签： css html 学习

本文链接：https://blog.csdn.net/weixin_45363236/article/details/125289896

版权

css

1.三种样式
内联样式
内部样式表
外部样式表

多种样式（优先级）：
内联 > 内部 > 外部

解释：

内联样式表的权值最高 1000；
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1

内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器

A 选择器都有一个权值，权值越大越优先；
B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
C 继承的CSS 样式不如后来指定的CSS 样式；
D 在同一组属性设置中标有“!important”规则的优先级最大；

background

使用简写属性时，属性值的顺序为：:

background-color
background-image
background-repeat
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-position\

text
font
link
box

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

border-width
border-style (required)
border-color

border-style：属性1，属性2，属性3，属性4
上->右->下->左

border-style：属性1，属性2，属性3
上->左右->下

border-style：属性1，属性2
上下->左右

border-style：属性1
上下左右属性相同

分组选择器

为了尽量减少代码，你可以使用分组选择器。
每个选择器用逗号分隔。

h1,h2,p
{
color:green;
}

嵌套选择器

它可能适用于选择器内部的选择器的样式。
在下面的例子设置了四个样式：

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class=“marked” 的元素指定一个样式。
.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。

Display(显示) 与 Visibility（可见性）
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

下面的示例把列表项显示为内联元素：
li {display:inline;}

下面的示例把span元素作为块元素：
span {display:block;}

Overflow
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
CSS 组合选择符

CSS3 中包含了四种组合方式:

后代选择器(以空格分隔)
子元素选择器(以大于 > 号分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号～分隔）

anchor伪类
在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示

a:link {color:#FF0000;} /* 未访问的链接 /
a:visited {color:#00FF00;} / 已访问的链接 /
a:hover {color:#FF00FF;} / 鼠标划过链接 /
a:active {color:#0000FF;} / 已选中的链接 */

选择器

盒模型
背景和边框
文字特效
2D/3D转换
动画
多列布局
用户界面

渐变（Gradients）

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

从左上角到右下角的线性渐变：

#grad {
height: 200px;
background-image: linear-gradient(to bottom right, red, yellow);
}

透明度（transparent）

rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}