CSS

1、css导入方式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<!-- 第一种导入方式-->
<style type="text/css">
@import "index.css";
</style>

<!-- 第二种导入方式-->
<style>
p{
background: azure;
}
</style>

<!-- 第三种导入方式-->
<link rel="stylesheet" href="index.css">

</head>
<body>
<h1>注册页面</h1>
<form method="post" enctype="multipart/form-data">

<p>用户名
<input type="text" placeholder="用户名">
</p>
<p>密码
<input type="password" placeholder="密码">
</p>

<!-- 第四种导入方式-->
<p style="background: aquamarine">style</p>

<div>这是链接式导入css</div>

</form>
</body>
</html>


2、css选择器

通用选择器 (*):样式作用于所有标签

标签选择器(标签名) :通过标签名来使用样式

ID选择器(#) :根据ID名来匹配样式

class选择器(.) :根据class名来匹配样式

后代选择器 .c p{color:red;} 只改变p标签的颜色

子代选择器 .c>p{color:red;} 只子儿子层找

多元素选择器 .div,p{color:red;} 改变pdiv标签的颜色


3、css属性操作

文本属性

文本颜色
color:red 文本颜色为红色
color:green 文本颜色为绿色
格式: color:颜色

对齐方式
text-align:center 居中对齐
text-align:right 右边对齐
text-align:justify 两端对齐
text-align:left 左边对齐
vertical-align:-20px; 设置元素的垂直对齐方式


文本大小
font-size: 10px;


首行缩进10px
text-indent:10px;

字母间距10px
letter-spacing:10px;

单词间距
word-spacing:10px;

首字母大写
text-transform:capitalize;

所有字母大写
text-transform:uppercase;

所有字母小写
text-transform:lowercase;

浏览器显示一个标准的字体样式
font-style:normal;

浏览器会显示一个斜体的字体样式
font-style:italic;

浏览器会显示一个倾斜的字体样式
font-style:oblique;

从父元素继承字体样式
font-style:inherit;

删除链接的下划线
text-decoration:none;

加上下划线
text-decoration:underline;

设置文本的粗细
font-weight

背景属性
background-color:red; 背景颜色
background-image:url('图像路径'); 背景图像
background-repeat:no-repeat;前面设置的图像不重复
background-repeat:repeat;前面设置的图像重复
background-position10px,10px;10 10 背景图像的位置

盒子属性

外边距
margin-bottom:10px;下外边距为10
margin-left:10px; 左外边距为10
margin-right:10px; 右外边距为10
margin_top:10px; 上外边距为10
简写:
margin:10px 20px 30px 40px; 上右下左
margin:10px 5px 1px; 10,右左5,下1
margin:10px 5px; 上下10,左右5
内边距
padding 用法同margin

边框属性 border
border-style:solid;定义实线
border-style:dotted;定义点状边框
border-style:dashed;定义虚线
border-style:double;定义爽线

边框颜色
border-color:red green blue black;
边框宽度
border-width:thin;定义细的边框
border-width:medium;默认
border-width:thick;定义粗的边框
border-width:length;自定义边框

设置列表项标记的类型
list-style-type:none; 无标记
list-style-type:circle; 标记是空心圆
list-style-type: square; 标记是实心方块
list-style-type: disc; 默认,标记是实心圆

display属性
display:inline;将块级标签设置成内联标签
display:block;将内联标签设置成块级标签
display:inline-block;具有块级标签和内联标签的属性(像块级标签一样设置长宽,像内联一样在一行显示)
display:none;隐藏元素,而且该元素占用的空间也消失
visibility:hidden隐藏元素,但是占用空间存在
内联标签不能设置长宽

溢出处理
overflow(定义溢出元素内容区的内容如何处理)
/*overflow: visible; 内容不会被修改,会呈现在元素框之外*/
/*overflow: hidden; !*内容会被修改,并且其余内容不可见*!*/
/*overflow: scroll; !*内容会被修剪,但是会显示其余内容**/
overflow: auto;/*如果内容被修改,会显示其余内容*/

设置元素透明度
opacity:value; 规定不透明度,从0.0(完全透明)到1.0(完全不透明)

clear规定元素的那一侧不允许有其他浮动元素
clear: left; 不允许左侧有浮动元素
clear: right; 不允许右侧有浮动元素
clear: both; 左右两侧不允许有浮动元素
clear: none; 允许左右两侧有浮动元素


float定义元素在哪个方向浮动
floatleft; 元素向左浮动
floatright; 元素向右浮动
float: none; 元素不浮动


position规定元素的定位类型
position: absolute; 绝对定位的元素,相对于static定位以外的第一个父元素进行定位
position: static; 默认值,无定位
position: relative; 相对定位,参照自己本身位置定位
position: fixed; 绝对定位,相对于浏览器窗口进行定位

z-index设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面
z-index: auto;默认。堆叠顺序与父元素相等
z-index: number;设置元素的堆叠顺序,值越大越在前面

top规定元素的顶部边缘。一个定位元素的上外边距边界与其包含块上边界之间的便宜
bottom 属性规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移
left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
right 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。


&nbsp是空格
line-height:10px; 设置行间距(行高)
posted @ 2021-12-01 17:50  ShadowFolk  阅读(36)  评论(0编辑  收藏  举报