首页 > 其他分享> 文章详细

css

2022-07-09 00:00:20 阅读：120 来源： 互联网

标签：元素 width background 10px border 选择器 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css