web前端CSS

最新推荐文章于 2023-02-15 21:09:51 发布

dddjjj-sicnu

最新推荐文章于 2023-02-15 21:09:51 发布

阅读量325

点赞数

分类专栏： web前端文章标签： web前端CSS

本文链接：https://blog.csdn.net/qq_43428547/article/details/98372368

版权

web前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

1.CSS(层叠样式表)概述,语法:

<html>
	<body>
		<p>
		</p>
	</body>
</html>

p{
	font-size:12px;//字号
	color:blue;//颜色
	font-weight:bold;//加粗（最后一条可以有分号,也可以没有）
}

2.CSS添加方法:
1.行内添加方法

<p style="color:red"></p>

2.内嵌样式（只适合当前网页）

<html>
	<head>
		<style type="text/css">
			p{
				color:red；
			}
		</style>
	</head>
	<body>
		<p></p>
	</body>
</html>

3.单独文件
外部式样式表文件style.css:

p{
	color:red;
}

网页文件:

<!docstyle html>
<html>
	<head>
	<!-- link表示添加一个链接,rel表示添加一个css文件,href为文件路径
		<link rel="stylesheet" href="style.css" />
	</head>
</html>

各样式可以覆盖,样式优先级:行内样式>内嵌样式>单独文件

3.CSS选择器：
1.标签选择器

<style type="text/css">
	p{font-size:12px}
</style>

<body>
	<p></p>
</body>

2.类别选择器

<style type="text/css">
p{ font-size:12px;}
.one{font-size:18px;}
.two{font-size:24px}
</style>

<body>
	<p class="one">类别1</p>
	<p class="one">类别1</p>
	<p class="two">类别2</p>
	<p class="two">类别2</p>
	<p class="three">类别3</p>
</body>

<!--class可同时有多个用空格分开,但id只能有一个,id和class可以混合使用-->
<div class="one yellow left"></div>
<div id="my"></div>
<div id="my" class="one yellow left"></div>

3.id选择器:

<style type="text/css">
 #one{font-size:12px;}
 #two{font-size:18px;}
</style>

<body>
	<p id="one">文字1</p>
	<p id="two">文字2</p>
</body>

高级选择器:

#accessory .acc_left>div:last-child	img{

s}

id选择器和class类别选择器的区别:
同id只能有一个,同class可以有多个

选择器的嵌套声明:

<style type="text/css">
	p span{
		color:red;
	}
</style>

<body>
	<p>我的名字叫<span>DJ</span></p>
</body>
<!--DJ为红色-->

集体声明:

<style tyoe="text/css">
	h1,p{text-align:center;}
</style>

<body>
	<h1>
	</h1>
	<p>
	</p>
</body>
<!--逗号分隔-->

全局声明(针对所有元素):

<style type="text/css">
*{font-szie:12px}
</style>

css文本样式(单位与颜色, text, font):
1.单位:
px 像素
en 字符(自动适应用户所使用的字体)
% 当前字体大小的%比
2.颜色
red,blue,green
rgb(x,x,x)
rgb(x%,x%,x%)
rgba(x,x,x,x)最后一个x表示透明度0表示完全透明,1表示不透明

属性:
color：颜色
letter-spacing：字符间距（px,em)
line-height：行高(px,em,%)，将行高设为与height相等的值就可垂直居中
text-algin：对齐(center,left,right,justify(两边对齐))
text-decoration：装饰线(none, overline, underline, line-through),none通常用在去掉超链接的下划线
text-indent:首行缩进(em)

字体:
font:bold 18px ‘幼圆’
font-family:“HiraginoSans GB”, “Microsoft YaHei”, sans-serif;//当字体带有空格需要加双引号
font-size:14px
font-size:120%
font-style:italic
font-weight:bold

简化font:
font:斜体粗体字号/行高字体
font:italic bold 16px/1.5em ‘宋体’

背景超链接样式:
当定义了一个空元素,也就是该元素内容为空,需要先定义元素的高度和宽度才能将背景颜色显示出来
背景:

background-color
background-image:url(“logo.gif”)
background-PositionX:背景位置(要设置为赋值)
background-PositionY:背景位置(要设置为负值)
background-size:背景大小
//以上三个在旋转魔方中可以了解到
background-repeat(背景图片填充方式):
repeat
repeat-x
repeat-y
no-repeat

background:颜色图片 repeat background-position;
超链接:
a?不同的,未访问的链接
a:visited:用户已经访问的链接
a:hover:鼠标悬停的链接
a:active:链接被点击的时候

超链接的这种样式称为:伪选择器

设置超链接测顺序love and hate
a:link{
	text-decoration:none;
	color:#09f;
]
a:visited{
	text-decoration:none;
	color:#930;
}
a:hover{
	text-decoration:none;
	font-size:120%
	color:#03c;
}
a:active{
	text-decoration:none;
	color:#03c;
}

表格和列表样式:
列表属性:
list-style:所有用于列表的属性设置于一个声明中
list-style-image(为列表项标志设置图片):url(“images/logo.gif”)
list-style-position(标志位置):inside可以让列表靠里,outside让每一项都靠外
list-style-type(标志类型):

表格属性:
width:px
height:px
border:线宽虚线(实线) #eee;
有时候为了不让border的长度影响整体长度可以按以下处理方式处理:box-sizing: border-box;

border-collapse(设置单元格与表格边框重叠):collapse

table,td,th{
	border:1px solid #eee
}

奇偶选择器:nth-child(odd|even)

tr:nth-child(odd){
background-color:#EAF2D3
}

CSS布局与定位:
盒子模型:
1.页面元素大小
2.边框
3.与其他元素的距离

盒子模型组成:
content内容
height高度
width宽度
padding内边距
border边框
margin外边距
在这里插入图片描述
一个盒子的实际宽度,高度:content+padding+border+margin
当盒子的内容超过盒子的边界时,可以设置overflow属性:hidden(隐藏),scroll(滚动),auto(自动)

border属性:
border-width:px,thin、medium、thick
border-style:dashed(虚线)、dotted(点)、solid(实线)、double(双实线)
border-color：颜色
border：width style color

padding属性:

margin属性：

border\padding\margin:1px 1px 1px 1px（顺序为上右下左）

每个div标签做出的盒子会有换行效果

在计算垂直距离时,外边距会合并(去最大的maigin为两物体之间的距离)

两张图片放在同一水平线上时,浏览器在图片间自动加上间距,如要使距离变为0,可设置font-size：0

设置div水平居中:margin:0 auto(是指在div区域内的水平居中)
设置文字图片水平居中:text-align:center
border\padding\margin:1px 1px（顺序为上右,下左跟上右一样）

定位机制:
文档流(系统默认):flow
元素分类:
block：每个block元素独占一行,可设置margin等,如div，p,h1-h6,ol,ul,table,form

<!--将其他元素设置为blokc-->
a{display:block;}

inline：
不单独占一行,width，height不可设置,如span、a

<!--将其他元素设置为inline-->
div{display:inline;}

inline-block：同时具备inline,block元素的特点,不单独占用一行,元素的height等可以设置,如img

浮动定位:float
float属性:left,right,none
cleat属性:left,right,both

层定位:layer
position属性:
static(默认值):没有定位,元素出现在正常的流中,z-index无效
fixed(固定定位):相对于浏览器，利用left,top,right,bottom进行固定
relative(相对定位):相对于其直接父元素,其元素脱离正常的文档流,但其在文档流中的原位置依然存在,相对于直接父元素定位
absolute(绝对定位)：脱离正常的文档流,其原位置不在存在，相对于reletive\absolute\body定位
left:
bottom:
left:
right:
z-index（值越大在最上层）:

dddjjj-sicnu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端CSS

1.CSS(层叠样式表)概述,语法:<html> <body> <p> </p> </body></html>p{ font-size:12px;//字号 color:blue;//颜色 font-weight:bold;//加粗（最后一条可以有分号,也可以没有）}2.CSS添加方法:1.行内...
复制链接

扫一扫

专栏目录