CSS整理学习合集（2）

CSS整理学习合集（2）

在了解了CSS的基本语法和选择器后，我们开始学习常用的CSS属性，

跳转：

CSS整理学习合集（1）

一、常用CSS属性

1.字体属性

设置字体相关的样式，HTML根元素默认字体的大小为16px

1.1 font-size

• 默认从父标签继承字体大小（默认值）
• px像素 pixel
• %百分比，相对父标签字体大小的百分比
• em倍数，相对于父标签字体大小的倍数

1.2 font-weight

normal 普通（默认）

bold 粗体

自定义 400 normal 700 bold

1.3 font-family

要求系统中要安装指定的字体

建议写3种字体：首选、其次、备用

1.4 font-style

normal 普通

italic 斜体

1.5 font

简写属性：font:font-style|font-weight|font-size|font-family

p{
	/*font-size: 30px;
	font-weight: bold;
	font-family: 华文行楷,宋体,黑体;
	font-style: italic;*/
	font: italic bold 30px 微软雅黑;
}

2.文本属性

2.1color

四种写法：

• 颜色名称：使用英文单词
• 16进制的RGB值：#RRGGBB

//特定情况下可以缩写
#FFFFFF--->#FFF 白色 
#000000--->#000 黑色 
#FF0000--->#F00 红色 
#00FF00--->#0F0 绿色 
#0000FF--->#00F 蓝色 
#CCCCCC--->#CCC 灰色 
#FF7300--->无法简写

• rgb函数：rgb(red,green,blue) [每种颜色的取值范围，[0,255]]

rgb(255,0,0)----->红 
rgb(0,255,0)----->绿 
rgb(0,0,255)----->蓝

• rgba函数：rbga(red,green,blue,alpha) [可以设置透明度，alpha取值范围：[0,1] 0表示完全透明 1表示完全不透明]

rgba(255,0,0,1)----->纯红 
rgba(255,0,0,0.5)---->红色半透明

​

/* 
 * 选择所有的 <p> 元素
 * 为 <p> 元素设置以下样式：
 */
p {
    /* 设置文本颜色为红色 */
    color: red;
   
    /* background-color: #ccc; */
    
    /* background-color: rgba(0,255,0,0.5); */
    /* 
     * 设置背景颜色为半透明的青色
     * 这里的 rgba 值表示红色通道为 0，绿色通道为 237，蓝色通道为 255，透明度为 0.5
     */
    background-color: rgba(0, 237, 255, 0.5);
    /* 设置行高为 50 像素，可用于调整文本行与行之间的垂直间距 */
    line-height: 50px;
    /* 设置文本水平居中对齐 */
    text-align: center;
}

/* 
 * 选择所有的 <img> 元素
 * 为 <img> 元素设置以下样式：
 */
img {
    /* 
     * 设置图片在垂直方向上居中对齐
     * 通常用于将图片与周围的文本或其他内联元素在垂直方向上对齐
     */
    vertical-align: middle;
}

/* 
 * 选择所有的 <div> 元素
 * 为 <div> 元素设置以下样式：
 */
div {
    /* 
     * 设置文本首行缩进 30 像素
     * 常用于段落的首行缩进排版
     */
    text-indent: 30px;
}

/* 
 * 选择所有的 <span> 元素
 * 为 <span> 元素设置以下样式：
 */
span {
    /* 设置字体大小为 30 像素 */
    font-size: 30px;
    /* 
     * 为文本添加下划线
     * 可用于突出显示某些文本内容
     */
    text-decoration: underline;
    /* 
     * 将文本中的每个单词的首字母转换为大写
     * 例如 "hello world" 会转换为 "Hello World"
     */
    text-transform: capitalize;
    /* 
     * 设置字符间距为 10 像素
     * 可用于调整字母之间的水平间距
     */
    world-spacing: 10px; 
}

/* 
 * 选择所有的 <h3> 元素
 * 为 <h3> 元素设置以下样式：
 */
h3 {
    /* 设置元素的宽度为 300 像素 */
    width: 300px;
    /* 设置元素的高度为 200 像素 */
    height: 200px;
    /* 设置背景颜色为浅灰色（十六进制表示） */
    background-color: #ccc;
    /* 
     * 设置文本不换行
     * 使文本在一行内显示，不会自动换行到下一行
     */
    white-space: nowrap;
    /* 
     * 当内容超出元素的宽度时，隐藏超出部分的内容
     * 结合 white-space: nowrap; 可以实现文本溢出隐藏的效果
     */
    overflow: hidden;
}

3.背景属性

3.1 background

简写属性：background:background-color|background-image|background-repeat|background-position

以空格隔开，书写顺序没有要求

/* 选择具有 'bg-example' 类的元素 */
.bg-example {
    /* 
     * 使用 background-color 属性设置背景颜色为淡蓝色 
     * 十六进制颜色代码 #e6f7ff 代表淡蓝色
     */
    background-color: #e6f7ff;

    /* 
     * 使用 background-image 属性设置背景图片 
     * 这里假设 'background.jpg' 是你项目中的图片文件，路径根据实际情况调整
     */
    background-image: url('background.jpg');

    /* 
     * 使用 background-repeat 属性设置背景图片的重复方式 
     * 'no-repeat' 表示背景图片不重复，只显示一次
     */
    background-repeat: no-repeat;

    /* 
     * 使用 background-position 属性设置背景图片的显示位置 
     * 'center center' 表示将背景图片水平和垂直都居中显示
     */
    background-position: center center;

    /* 
     * 使用 background-attachment 属性设置背景图片是否跟随滚动 
     * 'fixed' 表示背景图片固定，不跟随页面滚动
     */
    background-attachment: fixed;

    /* 
     * 使用 background 简写属性一次性设置多个背景相关属性 
     * 顺序依次为：背景颜色、背景图片、背景重复方式、背景位置、背景附着方式
     * 以下代码效果和上面分开设置的效果相同
     */
    /* background: #e6f7ff url('background.jpg') no-repeat center center fixed; */
}

4.列表属性

4.1 list-style

简写属性：list-style:list-style-type|list-style-image|list-style-position

书写顺序没有要求

/* 选择具有 custom-list 类的无序列表 */
.custom-list {
    /* 使用 list-style-type 属性设置列表前的标记为方块 */
    list-style-type: square;
    /* 使用 list-style-image 属性将图像作为列表前的标记 */
    /* 这里假设你有一个名为 marker.png 的图片，可根据实际情况替换路径 */
    list-style-image: url('marker.png');
    /* 使用 list-style-position 属性设置标记的位置为内部 */
    list-style-position: inside;
}

/* 选择具有 custom-list-2 类的有序列表 */
.custom-list-2 {
    /* 使用 list-style 简写属性一次性设置多个列表样式属性 */
    /* 顺序依次为：list-style-type、list-style-image、list-style-position */
    /* 这里设置列表标记为十进制数字，不使用图像标记，标记位置为外部（默认值） */
    list-style: decimal none outside;
}

5.表格属性

table{
			width:500px;
			border:1px solid blue;
			border-collapse:collapse;
		}
		td{
			border:1px solid blue;
		}

6.边距

6.1 border

表示盒子的边框

分为四个方向：上top、右right、下bottom、左left

border-top、border-right、border-bottom、border-left

每个边框包含三种样式：

border-top-color、border-top-width、border-top-style

border-right-color、border-right-width、border-right-style

border-bottom-color、border-bottom-width、border-bottom-style

border-left-color、border-left-width、border-left-style

样式style的取值：

solid实线、dashed虚线、dotted点线、double双线、inset内嵌的3D线、outset外嵌的3D线

简写，三种方式：

按方向简写：

border-top、border-right、border-bottom、border-left

书写顺序：

border-顺序：width style color

按样式简写：

border-color、border-width、border-style

书写顺序：

border-样式：top right bottom left

必须按顺时针方向书写，同时可以缩写：

border-width:2px;———>四个边框的宽度均为2px

border-width:1px 2px;

border-width:1px 2px 4px;

规则：如果省略，则认为上下一样，左右一样

终级简写：

如果四个边框样式完全相同，border:width style color;

6.2 padding

表示盒子的内边距，即内容与边框之间的距离

同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）

注意：如果上下冲突，则以上为准，如果左右冲突，则以左为准

6.3 margin

表示盒子的外边距，即盒子与盒子之间的距离

同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）

6.4 元素所占空间

页面中的元素实际所占的空间

宽度=width+左右padding+左右border+左右margin

高度=height+上下padding+上下border+上下margin

p{
			width:250px;
			background:#ccc;
		}
		.first{
			/* border-top-color:red;
			border-top-width:1px;
			border-top-style:solid;
			border-right-color:blue;
			border-right-width:2px;
			border-right-style:dotted;
			border-bottom-color:green;
			border-bottom-width:4px;
			border-bottom-style:dashed;
			border-left-color:gray;
			border-left-width:6px;
			border-left-style:double; */

			/* border-top:1px solid red;
			border-bottom:2px dashed blue; */
			
			/* border-color:red yellow green;
			border-width:1px 2px 4px 6px;
			border-style:solid dashed dotted solid; */

			border:1px solid red;
			padding:20px;
			margin:10px;
		}
		.second{
			/* padding-top:5px;
			padding-left:3px;
			padding-bottom:10px;
			padding-right:8px; */

			/* padding:1px 2px 4px 6px; */

			padding:5px;
		}
		.third{
			/* margin-top:50px;
			margin-left:30px; */

			/* margin:10px 20px; */

			/* 元素的居中 */
			/* 1.块级元素水平居中 */
			margin:auto;
			/* 2.文本水平居中 */
			text-align:center;
			/* 3.文本垂直居中 将height与line-height设置为相同 */
			height:100px;
			line-height:100px;
		}

7.定位

通过position属性实现对元素的定位

设置定位方式后，还要设置偏移量：top、bottom、left、right

7.1 相对定位

先设置元素的position属性为relative,然后再设置偏移量

7.2 绝对定位

先设置父标签为非static定位，然后设置元素的position属性为absolute，最后再设置偏移量

注意：

• 一般来说都会将父标签设置为非static定位
• 如果父标签不是非static定位，则会相对于浏览器窗口进行定位
• 设置元素为绝对定位后，元素会浮到页面上方

7.3 固定定位

先设置元素的position属性为fixed，然后再设置偏移量

设置元素为固定定位后，元素会浮动在面面上方

7.4 z-index

设置元素定位方式后，元素会浮在页面上方，此时可以通过z-index属性设置优先级，控制元素的堆叠顺序

取值为数字，值越大优先级越高，默认为auto(大多数浏览器默认为0)

**注意：**只能给非static定位的元素设置z-index属性

#container{
			width:800px;
			border:1px solid #000000;
			position:relative;
		}
		.div1,.div2,.div3,.div4{
			width:100px;
			height:50px;
		}
		.div1{
			background:red;
			position:relative;/* 相对定位 */
			top:20px;
			left:50px;
			z-index:-5;
		}
		.div2{
			background:blue;
			position:absolute;
			left:100px;
			bottom:50px;
			z-index:-8;
		}
		.div3{
			background:green;
			position:fixed;
			bottom:50px;
			left:100px;
		}
		.div4{
			background:cyan;
		}

8.元素的显示和隐藏

8.1 display

要注意的是 ：行级元素是无法设置宽度和高度的，可以为行级元素设置 display:inline-block ,才可以设置宽和高了

8.1 visibility

两者区别：

• display隐藏时不再占据页面中的空间，后面的元素会占用其位置
• visibility隐藏时会占据页面中的空间，位置还保留在页面中，只是不显示

9.轮廓

outline和border的区别：

• border可以应用于所有html元素，而outline主要用于表单元素、超链接元素
• 当元素获得焦点时会自动出现outline轮廓效果，当失去焦点时会自动消失，这是浏览器默认行为
• outline不影响元素的尺寸和位置，而border会影响

10.其他属性

4.1 宽高相关

4.2 overflow属性

当元素内容溢出时该如何处理

4.3 cursor属性

用于设置光标的形状