CSS基础
css语法
css选择器
- 简单选择器（根据名称、id、类来选取元素）
- 组合器选择器（根据它们之间的特定关系来选取元素）
- 伪类选择器（根据特定状态选取元素）
- 伪元素选择器（选取元素的一部分并设置其样式）
- 属性选择器（根据属性或属性值来选取元素）
如何添加css
外部CSS
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部CSS：是在head部分中style元素中定义
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
行内 CSS
行内样式（也称内联样式）可用于为单个元素应用唯一的样式。
如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body> 层叠顺序
当为某个 HTML 元素指定了多个样式时，会使用哪种样式呢？
页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：
- 行内样式（在 HTML 元素中）
- 外部和内部样式表（在 head 部分）
- 浏览器默认样式
因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。
css背景
CSS 背景属性：
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
body { background-image: url("gradient_bg.png"); background-repeat: repeat-x;/*水平方向重复，-y垂直方向重复*/ background-position: right top; background-attachment: scroll;/*不会随着滚动条滚动。fixed会随着滚动条滚动，即固定在屏幕右上角*/ }
CSS简写背景属性：顺序是颜色、图像、重复、依附、位置。可以缺失，如下缺失attachment。
body {
background: #ffffff url("tree.png") no-repeat right top;
}https://www.w3school.com.cn/css/css_background_shorthand.asp
CSS 边框样式
border-style 属性指定要显示的边框类型。
允许以下值：
- dotted - 定义点线边框
- dashed - 定义虚线边框
- solid - 定义实线边框
- double - 定义双边框
- groove - 定义 3D 坡口边框。效果取决于 border-color 值
- ridge - 定义 3D 脊线边框。效果取决于 border-color 值
- inset - 定义 3D inset 边框。效果取决于 border-color 值
- outset - 定义 3D outset 边框。效果取决于 border-color 值
- none - 定义无边框
- hidden - 定义隐藏边框
- border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。
- 注意*：除非设置了 border-style 属性，否则其他 CSS 边框属性都不会有任何作用！
宽度
border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）
京公网安备 11010502036488号