CSS入门

最新推荐文章于 2022-10-25 22:34:03 发布

Paranoia_yy

最新推荐文章于 2022-10-25 22:34:03 发布

阅读量188

点赞数

分类专栏： HTML 文章标签： css

本文链接：https://blog.csdn.net/Paranoia_yy/article/details/114377027

版权

HTML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

层叠样式表（Cascading Style Sheet,CSS）

style="color:red;"
style="width:80px; heigth:40px; background-color:darkseagreen;"

取色软件：屏幕拾色器

text-align:center; 让内部元素水平居中
magin:auto; 让元素本身水平居中
background-color:gray; 设定背景颜色
font-size:24px；设定字体大小
color:white; 设定文字颜色
margin:0 15px 上下边距为0 左右边距为15
line-height：40px div的高度设置
text-decoration:none 这样式是超链接的样式，无下划线
border: solid(实线)/dashed(虚线)/dotted(点点点)/double(双实线) 1px（线的粗细） black（线的颜色）
border-right 右边框线
padding: 0 15px 拉长边框、
background: green url(xxx.jpg) no-repeat; 可以包括背景的所有属性

标签内部的叫行内样式
style内部的叫内部样式

行内样式优先级>内部样式

CSS选择器

ID选择器（id）
id表示身份，在页面中元素的id不允许重复，因此id选择器只能选择单个元素
类别选择器（class）
选择拥有类别的多个元素
标签选择器（html body div）
根据标签名称
选择对应的所有标签
通用选择器（*）
针对页面上所有的标签都生效

注意：style是在head内部

CSS优先级 P20
行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器
<… style="…">
#box{…}
.con {…}
div{…}
*{…}

选择器选择的范围越小越精确，优先级越高

样例

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html {
				background-color: #ddd;
			}
			body {
				margin: 0;
			}
			#banner img {
				width: 100%;
			}
			#navigation {
				background-color: white; line-height: 80px; text-align: center;
			}
			#bottom {
				line-height: 80px; text-align: center; font-size: 16px; color: gray;
			}
			.nav {
				text-decoration: none;margin: 0 15px;color: black;
			}
		</style>
	</head>
	<body>
		<div id="banner">
			<img src="../img/DSC01598-1.jpg" >
			
		</div>
		<div id="navigation">
			<a href="#" class="nav">首页</a>
			<a href="#" class="nav">新闻</a>
			<a href="#" class="nav">事件</a>
			<a href="#" class="nav">联系我们</a>
		</div>
		<div id="bottom">
			版权所有，具体由我来解释
		</div>
	</body>
</html>

行内样式优先级>内部样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#navigation {
					text-align: center;
			}
			.item {
				text-decoration: none;
				color: black;
				border-right: solid 1px sandybrown;
				padding: 0 15px;
			}
		</style>
	</head>
	<body>
		<div id="navigation">
			<a href="#" class="item">首页</a>
			<a href="#" class="item">办公家具</a>
			<a href="#" class="item">数码科技</a>
			<a href="#" class="item">母婴</a>
			<a href="#" class="item">团购</a>
			<a href="#" class="item" style="border: none;">秒杀活动</a>
		</div>
	</body>
</html>

文本属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.p1 {color: red;} /*文字颜色*/
			.p2 {font-family: "楷体";} /*文字字体*/
			.p3 {font-size: 24px;} /*文字大小*/
			.p4 {font-weight: bold;} /*文字加粗*/
			.p5 {font-style: italic;} /*文字倾斜*/
			.p6 {text-indent: 60px;} /*首行缩进*/
			.p7 {text-align: center;} /*水平对齐方式*/
			.p8 {line-height: 100px;} /*行高*/
			.p9 {height: 100px; background-color: gray; line-height: 100px;} /*垂直居中*/
			.p10 {text-decoration: underline ;} /*文本修饰下划线*/
		</style>
	</head>
	<body>
		<ul>
			<li class="p1">1. 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
			<li class="p2">2. 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
			<li class="p3">3. 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
			<li class="p4">4. 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
			<li class="p5">5. 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
			<li class="p6">6. 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
			<li class="p7">7. 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
			<li class="p8">8. 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
			<li class="p9">9. 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
			<li class="p10">10. 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
		</ul>
	</body>
</html>

背景图
元素宽高的百分比是相对于父元素而言的，若父元素高度为0，则子元素高度即使设置100%，大小也是0
html元素大小是相对于浏览器窗口而言的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,body {
				margin: 0;
				height: 100%;
			}
			body {
				background-image: url(../img/222.gif); /*默认水平平铺*/
				background-repeat: no-repeat;
				background-position: center center; /*水平位置 垂直位置*/ 
			}
		</style>
	</head>
	<body>
	</body>
</html>

补充
url是设置背景图片的路径
src是img标签设置图片路径的属性
待完善

Paranoia_yy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS入门

层叠样式表（Cascading Style Sheet,CSS）style="color:red;"style="width:80px; heigth:40px; background-color:darkseagreen;"取色软件：屏幕拾色器待完善
复制链接

扫一扫

专栏目录