CSS基础

SpitBubble

已于 2023-09-02 21:14:16 修改

阅读量412

点赞数 3

文章标签： css 前端开发语言

于 2023-09-02 15:56:21 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_57486248/article/details/132639246

版权

一、选择器

1.1 元素选择器：

指定元素统一格式

p {text_align: center;}

1.2 id选择器：

当我们想精准找到某元素的时候要就id选择器

/* id选择器使用 # 来定义 */
#para1{ text-align:center;}

1.3 class选择器：

多个元素统一类型

/* class选择器使用 . 来定义 */
.classname{text-align:center;}

1.4 分组选择器

在样式表中有很多具有相同样式的元素就可以用分组选择器

h1,h2,p {color:green;}

1.5 嵌套选择器

适用于选择器内部的选择器样式

div p{
color:white;
}

二、CSS样式创建

2.1 外部样式表

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

2.2 内部样式表

<head>
	/* 将style写在head标签中的样式 */
    <style>
        body {
            background-image:url("images/back40.gif");
		}
    </style>
</head>

2.3 内联样式

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

2.4 多重样式优先级

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

三、背景

3.1 背景颜色

body {background-color:#b0c4de;}/* 十六进制表示 */
body {background-color:rgb(255,0,0);}/* RGB表示 */
body {background-color:red;}/* 颜色名称 */

3.2 背景图像

/* 默认情况下进行平铺显示，以覆盖整个元素实体 */
body {background-image:url('url');}
body {background: url('url')}

3.2.1背景图像——平铺与定位

body {
    background-image:url('url');
    background-image:no-repeat;/* 设置图片不平铺 */
    background-repeat:repeat-x; /* 设置只在水平方向平铺 */
    background-repeat:repeat-y; /* 设置只在垂直方向平铺 */
    background-position: right top;/* 设置图片位置 */
    background-attachment: fixed;/* 设置图片随页面滚动时位置固定 */
    background-attachment: scroll;/* 设置图片随页面滚动时滚动 */
}

3.2.2 背景——简写属性

body {background:#ffffff url('img_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	规定背景图像的尺寸。

四、文本、字体

4.1 Text文本

属性	描述
color	设置文本颜色
direction	设置文本方向。
letter-spacing	设置字符间距
line-height	设置行高
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字母
unicode-bidi	设置或返回文本是否被重写
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

4.2 Fonts字体

Property	描述
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。

五、超链接

5.1 链接样式

a:link {color:#FF0000;}  /* 未访问时链接样式*/
a:visited {color:#00FF00;}  /* 用户已访问过后链接样式 */
a:hover {color:#FF00FF;}  /* 当用户鼠标放在链接上时链接的样式 */
a:active {color:#0000FF;}  /* 当链接被点击时的链接样式 */

/* 
	a:hover 必须跟在 a:link 和 a:visited 后面 
	a:active 必须跟在 a:hover 后面
*/

5.2 文本修饰

a:link {text-decoration:none;}  /* 链接未访问时没有下划线 */
a:visited {text-decoration:none;}  
a:hover {text-decoration:underline;}  /* 用户鼠标放在链接上时有下划线 */
a:active {text-decoration:underline;}

5.3 背景颜色

a:link {background-color:#B2FF99;}  /* 链接未访问时背景颜色 */
a:visited {background-color:#FFFF85;}  /* 链接访问过后的链接的背景颜色 */ 
a:hover {background-color:#FF704D;}  /* 当鼠标放在链接上时的背景颜色 */
a:active {background-color:#FF704D;}  /* 当链接被点击时的链接背景颜色 */

5.4 鼠标形状

/* 当鼠标放在链接上时鼠标的样式 */
a:hover {
	cursor: default;/* 鼠标呈十字状 */
    cursor: pointer;/* 超链接的指针，手型 */
    cursor: wait;/* 指示程序正在忙 */
    cursor: help; /* 只是可用的帮助 */
    cursor: text;/* 指示文本 */
	cursor: crosshair;/* 鼠标呈十字状 */
}

六、列表样式

6.1 CSS无序列表

<ul>
	<li>唱</li>
	<li>跳</li>
	<li>rap</li>
</ul>

6.2 CSS有序列表

<ol>
	<li>唱</li>
	<li>跳</li>
	<li>rap</li>
</ol>

6.3 CSS列表符号

ul {list-style-type: none};  /* 不使用项目符号 */
ul {list-style-type: disc};  /* 空心圆 */ 
ul {list-style-type: circle};  /* 实心圆 */
ul {list-style-type: square};  /* 实心方块 */
ul {list-style-type: decimal};  /* 阿拉伯数字 */
ul {list-style-type: lower-alpha};  /* 小写英文字母 */
ul {list-style-type: upper-alpha};  /* 大写英文字母 */
ul {list-style-type: lower-roman};  /* 小写罗马数字 */
ul {list-style-type: upper-roman};  /* 大写罗马数字 */

6.4 图像作为列表符号

ul {list-style-image: url('url');}

七、Table表格

7.1 表格边框

<table>
	/* th是table head的简写，是表格的首行，字体自动居中加粗 */
	<th>
		/* td是 table data */
		<td></td>
	</th>
	/* tr是 table row*/
	<tr>
		<td></td>
	</tr>
</table>

7.2 表格属性

table { border-collapse:collapse; }  /* 设置边框宽度为0 */
table { width: 100%; height:100%; }  /* 设置表格的宽度和长度 */
td {text-align: center; }/* 设置表格文字位置 */
td {vertical-align: bottom; }  /* 设置表格文字对其方式 */
td {background-color: grenn; color: white;}  /* 设置表格背景色和边框颜色 */

八、CSS Box Model（盒子模型）

CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：内边距，外边距，边框，内容。

在这里插入图片描述

8.1 元素的宽度和高度

body {
	border:2px solid red; /* 设置边框的样式 */
	width:100% ;  /* 设置内容填充的高度 */
	padding:20px;  /* 设置内边距和内容的距离 */
	margin:10px;  /* 设置外边框的距离 */
}

8.2 padding（填充）

CSS Padding（填充）属性定义元素边框与元素内容之间的空间。

8.2.1 Padding的取值：

length：定义一个固定的填充（像素、pt、em等）。
%：使用百分之定义一个填充，相较于父元素的百分值。

8.2.2 单边内边距属性

padding-top: 20% ;
padding-bottom: 20% ;
padding-right: 20% ;
padding-left: 20%;

8.3 margin（外边距）

CSS Margin (外边距)属性定义元素周围的空间。CSS Margin 属性接受任何长度单位、百分数值甚至负值。

值	说明
auto	设置浏览器边距。这样做的结果会依赖于浏览器
length	定义一个固定的margin（使用像素，pt，em等）
%	定义一个使用百分比的边距

九、CSS边框

9.1 设置边框

p.none {border-style: none;}/* 无边框 */
p.dotted {border-style: dotted;}/* 点状边框 */
p.dashed {border-style: dashed;}/* 虚线边框 */
p.solid {border-style: solid;}/* 实线边框 */
p.double {border-style: double;}/* 双线边框 */
p.groove {border-style: groove;}/* 凹槽边框。其效果取决于 border-color 的值*/
p.ridge {border-style: ridge;}/* 垄状边框。其效果取决于 border-color 的值 */
p.hidden {border-style: hidden;}/* 隐藏边框 */
p.mix {border-style: dotted dashed solid double;}/* 混合边框 */

9.2 设置边的宽度

.one {
  border-style: solid;
  border-width: 1px 3px; /* 上边框和下边框为 1px，其他边为 3px */
}
.two {
  border-style: solid;
  border-width: 3px 1px; /* 上边框和下边框为 3px，其他边为 1px */
}
.three {
  border-style: solid;
  border-width: 1px 2px 3px 4px; /* 上边框 1px，右边框 2px，下边框 3px，左边框 4px */
}

9.3 设置边框颜色

.one {
  border-style: solid;
   border-color: red;
}

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

.one {
  border-style: solid;
  border-color: #ff0000; /* 十六进制值 */
}

.one {
  border-style: solid;
  border-color: rgb(255, 0, 0); /* RGB值 */
}