其他分享
首页 > 其他分享> > css

css

作者：互联网

css简介

定义：层叠样式表，Cascading Style Sheet ，包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。

三种引入样式的方式

外部样式表

link，写在头部
<link> 标签定义文档与外部资源之间的关系

代码

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<!--stylesheet 样式表-->
<!--text/css css文本-->
</head>

内部样式表

写在头部里，style
<style>用于为 HTML 文档定义样式信息
type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"

代码

<style type=“text/css">
body {background-color: red}
p {margin-left: 20px}
</style>

内联样式表

在body里

<p style=“color: red>

style属性

rel当前文档与被链接文档之间的关系
href被链接文档的位置
type被链接文档类型

注释

/**/

基本选择器

标签选择器

类选择器

可复用

id选择器

全局唯一

标签，类，id选择器的优先级

ID选择器>类选择器>标签选择器

子选择器

后面的所有元素都改变

.demo p{
background: pink;
}

属性选择器

标签[属性]｛｝

p[id=first] {
background: red;
}

背景样式

background-color背景颜色
background-image背景图像 background-size:contain

background-attachment:fixed; 固定，不随内容的滚动而滚动
background-attachment:scroll; 滚动，随内容的滚动而滚动

background-repeat背景重复方式

简写：
background: 背景颜色或者背景图像 背景不重复显示 固定显示
没有固定顺序，是background的属性都可以写在后面

实例

.demo{
background:url(../image/arrow-down.gif) no-repeat fixed;
}

边框

边框颜色

border-color

边框粗细

border-width
实例：

border-top-width:5px;
border-right-width:10px;
border-bottom-width:8px;
border-left-width:22px;

简写：上右下左
border-width:1px 3px 5px 2px;

边框样式

border-style
none : 　无边框
hidden : 　隐藏边框
dotted : 　点线
dashed : 　虚线
solid : 　实线边框
double : 　双线边框。两条单线与其间隔的和等于指定的border-width值

边框简写

粗细，风格，颜色，顺序可以不固定，是border属性就可以写
简写：
border:5px solid red;

字体

文字颜色： color:red;
文字大小： font-size:12px;
文字粗细：font-weight:bolds

字体样式：font-family:”宋体”
小写字母以大写字母显示：font-variant:small-caps

简写：
font: bold 12px "微软雅黑";

段落

文本对齐方式：text-align:center;
行间距：line-height:10px;
字间距：letter-spacing:10px
首行缩进：text-indent:20px;
文本划线：text-decoration:none;
划线：文本线none/underline/overline/line-through; 定义文本上的下划线/上划线/中划线

列表

list-style-type 设置列表项标记的类型。
list-style-position 设置在何处放置列表项标记。inside,outside不知道有什么区别
list-style-image 使用图像来替换列表项的标记。

简写：list-style:square inside;

标记类型：
disc:点
circle:圆圈
square:正方形
decimal:数字
decimal-leading-zero:十进制数，不足两位的补齐前导0，例如:01,02,03,...,98,99
lower-roman:小写罗马文字，例如:i,ii,iii,iv,v,...
upper-roman:大写罗马文字，例如:I,II,III,IV,V,...
lower-greek:小写希腊字母，例如:α(alpha),β(beta),γ(gamma),...
lower-latin:小写拉丁文，例如:a,b,c,...z
upper-latin:大写拉丁文，例如:A,B,C,...Z
armenian:亚美尼亚数字
georgian:乔治亚数字，例如:an,ban,gan,...,he,tan,in,in-an,...
lower-alpha:小写拉丁文，例如:a,b,c,...z
upper-alpha:大写拉丁文，例如:A,B,C,...Z
none:无(取消所有的list样式)

超链接伪类

下划线：a{text-decoration: none;}
未访问的链接 a:link {color:#FF0000;}
已访问的链接a:visited {color:#00FF00;}
鼠标划过链接a:hover {color:#FF00FF;}
已选中的链接a:active {color:#0000FF;}

盒子模型

组成部分：外边距（margin）、边框（border）、内边距（padding）、内容（content）

border:1px solid red;
padding:10px 10px 10px 10px; 上右下左
margin:10px 10px 10px 10px; 上右下左

盒子居中：margin:0px auto;
文字居中： text-align: center;

标准文档流

定义：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素
默认的排列方式

float脱离文档流浮动

常用于导航

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

块级元素，行内元素

块级元素：独立一行
行内元素：一行内

转换：
display:none; 不显示
display:block;变成块级元素
display:inline; 变成行内元素
display:inline-block;以块级元素样式展示，以行级元素样式排列

块级元素
address 地址
center 举中对齐块
div
dl 定义列表
form 交互表单
h标签
hr 水平分隔线
ol 无需列表
ul有序列表
p 段落
pre 格式化文本

行内元素：
span
a - 链接
b - 粗体(不推荐)
br- 换行
em - 强调
i - 斜体
input - 输入框
label - 表格标签
select - 项目选择
strong - 粗体
textarea - 多行文本输入框
u - 下划线
var - 定义变量

溢出

overflow
hidden：切下去不显示
scroll:加滚动条
auto:加滚动条

overflow:hidden;

定位

固定定位 参照物--浏览器窗口---做 弹窗广告用到
fixed

相对定位 参照物以他本身
relative

绝对定位 参照物是父元素
absolute

实例：

position: relative;
left: 40px;
top:50px;

z-index重叠

值大的在上面
z-index: -1

定位重叠实例：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 300px;
				height: 300px;
			}
			.div1{
				background: red;
			}
			.div2{
				width: 500px;
				height: 500px;
				background: blue;
				position: relative;
				left: 40px;
				top:50px;
			}
			.div3{
				background: green;
			}
			.div4{
				width: 150px;
				height: 150px;
				background: yellow;
				position: absolute;
				top: 100px;
				left: 100px;
				z-index: -1;
			}
			
			.div5{
				width: 150px;
				height: 150px;
				background: black;
				position: absolute;
				top: 120px;
				left: 120px;
				z-index: 1;
			}
		</style>
	</head>
	<body>
		<div class="div1"></div>
		<div class="div2"><div class="div4"></div><div class="div5"></div></div>
		<div class="div3"></div>
	</body>
</html>

标签：元素,width,background,10px,border,选择器,css
来源： https://www.cnblogs.com/dabaitunb/p/16459956.html