CSS知识

一苇0527

于 2024-05-22 20:45:20 发布

阅读量698

点赞数 18

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_57552069/article/details/139129159

版权

css（层叠样式表）

作用 :

html的样式，配合脚本进行修改格式化样式。

解析：

从右往左

构成：

选择器声明（属性和值）

选择器：

id选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>number</title> 
<style>
#para1
{
	text-align:center;
	color:red;
} 
</style>
</head>

<body>
<p id="para1">受影响</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>

class选择器

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>number</title> 
<style>
.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">居中</h1>
<p class="center">居中。</p> 
</body>
</html>

元素选择器

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

其他选择器：

子选择器 
后代选择器 
属性选择器  
通配符选择器  
群组选择器

插入样式表的方法有三种:

外部样式表(External style sheet)

<link rel="stylesheet" href="css/style.css"/>

@import url
@import url("g.css");
.demo1{
				color: red;
				width: 100px;
				height: 100px;
				background: blue;
			}

内部样式表(Internal style sheet)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo1{
				color: red;
				width: 100px;
				height: 100px;
				background: blue;
			}
			
		</style>
	</head>
	<body>
		<div class="demo1">
			demo1
		</div>
	</body>
</html>

内联样式(Inline style)

<div style="color: blue;width: 100px;height: 100px; background: black;">demo2</div>

优先级：

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

常见的css样式：

注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它
CSS注释以/*开始, 以*/结束

快捷键：Ctrl + /
/*这是个一个注释*/

背景

background-color 属性定义了元素的背景颜色
列：body {background-color:#b0c4de;}
background-image 属性描述了元素的背景图像
列：body {background-image:url('https://gitee.com/yiwei-0527/network-security/raw/master/image/login.png');}
列：background-image 属性会在页面的水平或者垂直方向平铺。
如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:
列：body
{
background-image:url('https://gitee.com/yiwei-0527/network-security/raw/master/image/login.png');
background-repeat:repeat-x;
}
让背景图像不影响文本的排版
列：body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
background-attachment:fixed; 固定，不随内容的滚动而滚动
background-attachment:scroll; 滚动，随内容的滚动而滚动
简写
body {background:#ffffff url('img_tree.png') no-repeat right top;}

文本

颜色
body {color:red;}
对齐方式
h1 {text-align:center;}居中
p {text-align:right;}左对齐
p {text-align:justify;}右对齐
文本修饰
 text-decoration属性主要是用来删除链接的下划线
 a {text-decoration:none;}
 h1 {text-decoration:overline;}上划线
h2 {text-decoration:line-through;}中划线
h3 {text-decoration:underline;}下划线
文本转换
p.uppercase {text-transform:uppercase;}全部大写
p.lowercase {text-transform:lowercase;}全部小写
p.capitalize {text-transform:capitalize;}首字母大写
首行缩进
p {text-indent:50px;}
字间距
letter-spacing：

字体

p {font-style:normal;}正常
p {font-style:italic;}斜体
h1 {font-size:40px;}字体大小
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-weight	指定字体的粗细。

链接

可以和其他css配合使用
a:link {color:#000000;}      未访问链接
a:visited {color:#00FF00;}   已访问链接 
a:hover {color:#FF00FF;}   鼠标移动到链接上 
a:active {color:#0000FF;}   鼠标点击时

列表

ul.a {list-style-type:circle;}前面试空心圆点
ul.b {list-style-type:square;}前面试实心圆点
ol.c {list-style-type:upper-roman;}空心方块
ol.d {list-style-type:lower-alpha;}实心方块

list-style-image:url('图片地址');前面加图片
list-style-type: none;移除默认样式

表格

指定了一个表格的Th和TD元素的黑色边框
table, th, td
{
    border: 1px solid black;
}
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开
table
{
    border-collapse:collapse;
}
Width和height属性定义表格的宽度和高度
table 
{
    width:100%;
}
th
{
    height:50px;
}
text-align属性设置水平对齐方式，向左，右，或中心
td
{
    text-align:right;
}
垂直对齐属性设置垂直对齐，比如顶部，底部或中间：
td
{
    height:50px;
    vertical-align:bottom;
}
如需控制边框和表格内容之间的间距，应使用td和th元素的填充属性：
td
{
    padding:15px;
}
指定th元素的文本和背景颜色
th
{
    background-color:green;
    color:white;
}

div（盒子模型）

div {
    width: 220px;宽
    padding: 10px;向外扩展10像素
    border: 5px solid gray;   边框加5像素
   
}

边框

border-style:值  
              dotted: 定义一个点线边框
              dashed: 定义一个虚线边框
              solid: 定义实线边框
边框宽度：
 border-width:5px;
 边框颜色
 border-color:red;
 可以单独设置边框：上下左右
 border-left：属性： none无边框   hidden隐藏边框  double：双线边框groove : 　根据border-color的值画3D凹槽  ridge : 菱形边框    inset : 凹边    outset : 3D凸边

外边距

margin-top:100px;距离上边的距离
margin-bottom:100px;距离下边的距离
margin-right:50px;距离右边的距离
margin-left:50px;距离左边的距离
margin: 100px 50px;上下100  左右50px

内边距：

padding-top:25px;上内边距是 25px
padding-bottom:25px;下内边距是 25px
padding-right:50px;右内边距是 50px
padding-left:50px左内边距是 50px

显示

不让显示
display:none;
显现出来
display:block;

定位

静态定位的元素不会受到 top, bottom, left, right影响。
position: static;
 position: static;
元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。
{
    position:fixed;
    top:30px;
    right:5px;
}
相对定位元素的定位是相对其正常位置。
h2.pos_left
{
    position:relative;
    left:-20px;
}
h2.pos_right
{
    position:relative;
    left:20px;
}
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
h2
{
    position:absolute;
    left:100px;
    top:150px;
}

浮动：

float:
    left  元素向左浮动。
     right 元素向右浮动
     clear: both;清除浮动

1. 块级元素、行内元素

块级元素

他会独占一行，在默认情况下，其宽度自动填满其父元素的宽度；

块级元素可以设置width、height属性；

块级元素即使设置了宽度也是独占一行，块级元素可以设置margin、padding属性；

address 地址
center 举中对齐块
div- 常用块级容易
dl 定义列表
form 交互表单 （只能用来容纳其它块元素）
h标签
hr 水平分隔线
ol 无需列表
ul有序列表
p 段落
pre 格式化文本

行内元素

行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到行排不下，就自动换行，其宽度随内容而变化；

行内元素的width、height属性则无效；

行内元素的margin、padding属性很奇怪，水平方向的padding-left、padding-rigtht、margin-left、padding-right都会产生边距效果，但是竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不产生边距效果。

a - 锚点
b - 粗体(不推荐)
br- 换行
code - 计算机代码(在引用源码的时候需要)
em - 强调
i - 斜体
img - 图片（特殊的内联元素，同时是内联替换元素，替换元素可以设置宽高）
当图片和DIV在一起时，图片周围会出现margin现象，即元素不重合贴在一起，为了解决这个问题，设置img的css为{margin：0；display：block；border：0px}
input - 输入框
label - 表格标签
select - 项目选择
strong - 粗体强调
textarea - 多行文本输入框
u - 下划线
var - 定义变量
替换元素有如下：（和img一样的设置方法）
<img>、<input>、<textarea>、<select>
<object>都是替换元素，这些元素都没有实际的内容