提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

前端 --- CSS基础（一）

基础 前端 CSS
2023-03-14 23:00:12 时间

CSS使用规则

选择器 {
    属性：值；
    属性：值；
}

选择器

元素选择器

p {
  text-align: center;
  color: red;
}

id 选择器

id 具有全局唯一性，

#para1 {
  text-align: center;
  color: red;
}

类选择器

.center {
  text-align: center;
  color: red;
}
# 只有具有 class="center" 的 <p> 元素会居中对齐
p.center {
  text-align: center;
  color: red;
}

通用选择器

* {
  text-align: center;
  color: blue;
}

分组选择器

# 未使用分组选择器
h1 {
  text-align: center;
  color: red;
}
h2 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}
# 使用分组选择器，使用“,”分开，能尽最大可能减少代码
h1, h2, p {
  text-align: center;
  color: red;
}
选择器例子例子描述
.class.intro选取所有 class=“intro” 的元素。
#id#firstname选取 id=“firstname” 的那个元素。
**选取所有元素。
elementp选取所有

元素。

element,element,…div, p选取所有

元素和所有

元素。

添加 CSS三种方法

引入外部 CSS

<link rel="stylesheet" href="/demo/css/mystyle.css">

引入内部 CSS

<style>
body {
  background-color: linen;
}
h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>

行内 CSS

# 利用 style 属性
<p style="color:red;">This is a paragraph.</p>

层叠顺序

优先级：行内元素最高

  1. 行内样式（在 HTML 元素中）
  2. 外部和内部样式表（在 head 部分）
  3. 浏览器默认样式

注释

在

在HTML和CSS文件中使用 注释

颜色

背景色

background-color

文本颜色

color

边框颜色

border:2px solid Tomato;
# 边框大小 是否有边框 颜色

RGB 颜色

根据三原色来调节颜色

rgb(red, green, blue)

RGBA 值

多了一个 alpha 通道，可以指定透明度

rgb(red, green, blue, 0 - 1)
# 1 表示不透明，0 表示全透明

HEX 颜色

#rrggbb
 其中 rr（红色）、gg（绿色）和 bb（蓝色）是介于 00 和 ff 之间的十六进制值（与十进制 0-255 相同）。

HSL 颜色

hsla(hue, saturation, lightness)
色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。 
饱和度（saturation）是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。
亮度（lightness）也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色。

HSLA 值

hsla(hue, saturation, lightness, alpha)
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字：

背景

常用属性

  • background-color

background-color 属性指定元素的背景色。

opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明

# 文本也会跟着变透明
div {
  background-color: green;
  opacity: 0.3;
}
# 文本不随背景透明度的改变而改变
div {
  background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
}
  • background-image

background-image 属性指定用作元素背景的图像。

默认情况下，background-image 属性在水平和垂直方向上都重复图像。

body {
  background-image: url("paper.gif");
}
  • background-repeat
# 水平方向上重复图像
body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}
# 垂直方向上重复图像
body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-y;
}
# 背景图像只显示一次
body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}
  • background-attachment

background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：

# 固定背景图片，会从页面消失
body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}
# 背景图随页面滚动，不会从页面消失
body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}
  • background-position

background-position 属性用于指定背景图像的位置。

# 将图片放在右上角
body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

简写属性

body {
  background: #ffffff url("tree.png") no-repeat right top;
}
# 简写顺序为background-color background-image background-repeat background-attachment background-position

属性图表

属性描述
background在一条声明中设置所有背景属性的简写属性。
background-attachment设置背景图像是固定的还是与页面的其余部分一起滚动。
background-clip规定背景的绘制区域。
background-color设置元素的背景色。
background-image设置元素的背景图像。
background-origin规定在何处放置背景图像。
background-position设置背景图像的开始位置。
background-repeat设置背景图像是否及如何重复。
background-size规定背景图像的尺寸。

边框

常用属性

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-width 属性指定四个边框的宽度。

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick：

p.one {
  border-style: solid;
  border-width: 5px;
}
p.two {
  border-style: solid;
  border-width: medium;
}
p.three {
  border-style: dotted;
  border-width: 2px;
} 
p.four {
  border-style: dotted;
  border-width: thick;
}

border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）：

p.one {
  border-style: solid;
  border-width: 5px 20px; /* 上边框和下边框为 5px，其他边为 20px */
}
p.two {
  border-style: solid;
  border-width: 20px 5px; /* 上边框和下边框为 20px，其他边为 5px */
}
p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 上边框 25px，右边框 10px，下边框 4px，左边框 35px */
}

border-color 属性用于设置四个边框的颜色。

可以通过以下方式设置颜色：

  • name - 指定颜色名，比如 “red”
  • HEX - 指定十六进制值，比如 “#ff0000”
  • RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
  • HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
  • transparent

**注释：**如果未设置 border-color，则它将继承元素的颜色。

p.one {
  border-style: solid;
  border-color: red;
}
p.two {
  border-style: solid;
  border-color: green;
}
p.three {
  border-style: dotted;
  border-color: blue;
}

border-color 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}

单独设定每个边

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

边格式简写

/* 四个值 上 右 下 左*/
p {
  border-style: dotted solid double dashed; 
}
/* 三个值 上 右左 下 */
p {
  border-style: dotted solid double; 
}
/* 两个值 上下 右左*/
p {
  border-style: dotted solid; 
}
/* 一个值 */
p {
  border-style: dotted; 
}

border-radius 属性用于向元素添加圆角边框：

p {
  border: 2px solid red;
  border-radius: 5px;
}


相关文章