何为CSS
- CSS 指的是层叠样式表(Cascading Style Sheets)
- CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
- CSS 节省了大量工作。它可以同时控制多张网页的布局
- 外部样式表存储在 CSS 文件中
css语法
- 选择器指向您需要设置样式的 HTML 元素。
- 声明块包含一条或多条用分号分隔的声明。
- 每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。
- 多条 CSS 声明用分号分隔,声明块用花括号括起来。
说明:
- 一个页面上的元素众多,选择器就用于在页面中找到/选择需要应用这个样式的对象。
- 除标签元素选择器外,还有id和class选择器。
- id 选择器适用范围只有一个元素。
- 元素的class值可以多个,也可以重复。
css使用
外部css
每张 HTML 页面必须在 head 部分的 元素内包含对外部样式表文件的引用。
外部样式在 HTML 页面 部分内的 元素中进行定义:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
</body>
</html>
内部css
内部样式在 HTML 页面的 部分内的
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>heading</h1>
<p>paragraph.</p>
</body>
</html>
行内css
如需使用行内样式,请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">heading</h1>
<p style="color:red;">paragraph.</p>
</body>
</html>
多个样式表
当为某个 HTML 元素指定了多个样式时,优先级顺序:
- 行内样式(内联样式)
- 外部和内部样式
- 浏览器默认样式
css颜色
CSS中,颜色值通常以以下方式定义:
- 十六进制 - 如:"#ff0000"
- RGB - 如:“rgb(255,0,0)”
- 颜色名称 - 如:“red”
盒子模型
盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外,这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的
- Content(内容) - 盒子的内容,显示文本和图像
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
css边框和边距
css 边框
css边框属性border,可指定元素边框的样式、宽度和颜色。
css边框样式border-style,可以设置一到四个值(用于上边框、右边框、下边框和左边框)允许以下值:
- dotted - 定义点线边框
- dashed - 定义虚线边框
- solid - 定义实线边框
- double - 定义双边框
- none - 定义无边框
- hidden - 定义隐藏边框
css外边距
css外边距属性margin,为元素周围创建空间。
margin 属性是以下各外边距属性的简写属性:
- margin-top
- margin-right
- margin-bottom
- margin-left
说明:将 margin 属性设置为 auto,使元素在其容器中水平居中。
然后,该元素将占据指定的宽度,并且剩余空间将在左右边界之间平均分配。
css内边距
css内边距属性padding,用于在任何定义的边界内的元素内容周围生成空间。
padding 属性是以下各内边距属性的简写属性:
- padding-top
- padding-right
- padding-bottom
- padding-left
提示: 无论边框、内边距还是外边距,它们都有上下左右四个方向。
定位
position 属性指定了元素的定位类型。
五个不同的位置值:
- static
- relative
- fixed
- absolute
- sticky
说明:元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。
static 定位
静态定位的元素不会受到 top, bottom, left, right影响。
fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动
relative 定位
相对定位元素的定位是相对其正常位置。移动相对定位元素,但它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>
选择器
CSS 中有四种不同的组合器:
- 后代选择器 (空格) :匹配属于指定元素后代的所有元素。
- 子选择器 (>) : 匹配属于指定元素子元素的所有元素。
- 相邻兄弟选择器 (+):匹配所有作为指定元素的相邻同级的元素。
- 通用兄弟选择器 (~):匹配属于指定元素的同级元素的所有元素。
伪类
语法
selector:pseudo-class {property:value;}
实例
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
注意:
- 在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
- 在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
- 伪类的名称不区分大小写。
匹配所有
元素中的第一个 元素
p > i:first-child``
{
color:blue;
}
lang 类为属性值为 no 的q元素定义引号的类型:
q:lang(no) {quotes: "~" "~";}
伪元素
语法
selector:pseudo-element {property:value;}
::first-line 伪元素
::first-line 伪元素用于向文本的首行添加特殊样式。
注意:::first-line 伪元素只能应用于块级元素
::first-letter 伪元素
::first-letter 伪元素用于向文本的首字母添加特殊样式。
注意:::first-letter 伪元素只适用于块级元素。
伪元素可以与 CSS 类结合使用,也可以组合几个伪元素。
::before 伪元素
::before 伪元素可用于在元素内容之前插入一些内容。
::after 伪元素
::after 伪元素可用于在元素内容之后插入一些内容。
::selection 伪元素
::selection 伪元素匹配用户选择的元素部分