CSS入门

最新推荐文章于 2022-01-22 15:32:51 发布

broken snow

最新推荐文章于 2022-01-22 15:32:51 发布

阅读量428

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_29310159/article/details/108700380

版权

前言

web前端虽然有HTML作为基本内容的编程语言，但是一个好的界面想要在众多前端中脱颖而出，对内容的布局如字体，颜色，排版等必须精美才能显示出其优势。因此，CSS语言就起到了它的作用。

一.CSS简单介绍

CSS本质上是样式表文件，用于控制web前端内容的表现形式。当前比较常见的HTML页面引入CSS的方式是内容与表现相分离，即把CSS 独立出来，这样比较清晰明了，修改时也很方便。

二.CSS选择器

HTML页面引入CSS只能通过选择器的调用来进行，有以下四种选择器的类别：

ID选择器（ID指向的选择器必须唯一，而且只能使用一次）

#name{...}(声明需要#)		<div id="name"></div>

类选择器（用的最广泛）
1.无需唯一
2.选择性使用
3.组合使用

.name{...}     <div class="name"></div>

标签选择器 (很少使用)

li{...}        <li>...</li>

4.共性选择器（当页面有极其多的相同表现时与body连用可节省代码）

body,body*{}

三.CSS样式设置

CSS对于不同内容样式的设置有不同的编码方法

	
 /*文字样式：font*/
 font-style:normal/italic; （正常/斜体）
 font-weight:normal/bold;  （正常/粗体）
 font-size:Npx;  12-14px;  （字体大小）
 font-family:arial,"宋体";
 font：italic bold 20px arial,"宋体"；（font不同属性可以同时设置，属性之间用空格隔开即可，顺序没有影响）
 
 /*文本样式*/
 color：word/#6位16进制/rgb(0-255,0-255,0-255)/rgba(0-255,0-255,0-255,0-1(透明度))/；(rgba是背景颜色)
 
 text-align：left/center/justify; (对齐)
 line-height:Npx；段落1.2em (段间距)
 text-indent：Npx/Nem;   （首行开头空）
 
 /*列表样式*/
 list-style-type:none;  
 list-style-position:outside/inside;
 list-style-image:url(path);
 
 

 
 /*背景样式*/
 background-color:4种方式；
 background-image:url(path);
 background-position:相对位置center/绝对位置；
	相对位置：
		横向：left center right；
		垂直：top center bottom；
		绝对位置：Xpx Ypx；
background-repeat:no-repeat;
background: color image position repeat ;
background-size:cover;

四：CSS盒子模型

为了使页面布局的更加规范整齐，不同的内容互不干扰，盒子模型被大量的使用。

 
 /*盒子模型*/
 box=sizing:content-box（内容盒子）/border-box（边框盒子）;
   /*宽高*/
   width:Npx;
   height:Npx;

关于盒子的一些基本概念如下图：

在这里插入图片描述

实际使用中
下面简单了解这些概念和其编码方式`
内外边距

 /*外边距 兄弟关系  盒子相对于父盒子水平居中：margin:Npx auto Mpx*/ 
 margin:topPx rightPx bottomPx leftPx;
 margin:topPx lrPx bottomPx ;
 margin:tbPx  lrPx ;
 margin:Npx;
 margin-top:Npx;
 margin-right:Npx;
 margin-bottom:Npx;
 margin-left:Npx;
 /*内边距  父子关系 */ 
padding:语法同margin

边框

/*边框*/
 border:color width style;
 border-top:color width style;
 border-color:topcolor rightcolor bottomcolor leftcolor;
 border-top-color:color;
 
 #圆角
 border-radius:左上角半径 右上角半径 右下角半径 左下角半径

当一个盒子里包含多个相似盒子时，为了节省代码，通常采用弹性盒子模型

/*弹性盒子*/ inline=> inline-block=>block；
/*父盒子样式*/
display:inline/inline-block/block/flex/none;（在父盒子中使用赋值flex，就可使用弹性盒子模型）
flex-direction:row/column; （子盒子元素展开方向）
flex-wrap:no-wrap/wrap; （是否按照父盒子与子盒子尺寸的大小自动换行）
justify-content:space-between/space-around; 水平对齐
align-content:space-between/space-around; 垂直对齐（多行）
align-items:space-between/space-around; 垂直对齐
/*子盒子样式*/
flex-grow 1;（子盒子中使用，将父盒子剩余部分的宽度全部赋给该子盒子）

四.案例操作

制作以下部分淘宝网首页右边部分

在这里插入图片描述

将要做内容视为一个盒子，上面视为另一个盒子，测出上面盒子的高度即可确定目标盒子的位置。测量方法如下：
在淘宝网首页找到源码，找到相应信息如下：
在这里插入图片描述

121+30=151再考虑到外边距，高度大致定为157，其余尺寸以此类推，不再赘诉
只做右边的内容，看作两个盒子

<html>
	<head>
		<title>第一个前端工程</title>
		<!--引入css的方式-->。
		<link rel="stylesheet" type="text/css" href="css/com.css"/>
		<link rel="stylesheet" type="text/css" href="css/taobao.css"/>
		
	</head>
		
	<body>
		<header class="header"></header>
		<nav class="nav">
			<div class="nav-left"></div>
			<section class="nav-right">
				
				
			<section>
		</nav>
	</body>
<html>

/*共性选择器*/
body,body*{
	margin:0;
	padding:0;
	font:12px/1.2 arial,"Microsoft Yahei";
	color:#333;
	outline:none;
	border:none;
	box-sizing:border-box;
	
}

body{
	background-color:#dedede;
}


.header{
	width:100%;
	height:157px;	
}

.nav{
	margin:0 auto;
	width:1170PX;
	height:522px;
	display:flex;
}

.nav-left{
	width:900PX;
	height:522px;
	background-color:orange;
}

.nav-right{
	flex-grow:1; /*将父盒子nav剩余的宽度全部交给子盒子nav.right*/
	height:522px;
	background-color:white;
}

运行结果如下为了让结果明显，左边盒子背景色改为了橘色
asgr

接下来就不一一赘述了，以下完整代码重要的都会有标注

HTML部分

<html>
	<head>
		<title>第一个前端工程</title>
		<!--引入css的方式-->
		<link rel="stylesheet" type="text/css" href="css/com.css"/>
		<link rel="stylesheet" type="text/css" href="css/taobao.css"/>
	</head>
		
	<body>
		<header class="header"></header>
		<nav class="nav">
			<div class="nav-left"></div>
			<section class="nav-right">
				<div class="nr-user">
					<div class="nr-user-icon"/></div>
					<div class="nr-user-unlogin">Hi!&nbsp;你好</div>
					<div class="nr-user-two">
						<div><span class="coin-icon"></span>领淘金币抵钱</div>
						<div><span class="club-icon"></span>会员俱乐部</div>
					</div>
					<div class="nr-user-btns">
						<div>登录</div>
						<div>注册</div>
						<div>开店</div>
					</div>
				</div>
				<dl class="nr-news">
				    <dt class="s">公告</dt>
					<dd class="s">95公益周阿里、腾讯等六家公司同台联合做公益</dd>
					<dt >规则</dt>
					<dd >新增《淘宝网汽配行业管理规范》公示通知</dd>
					<dt >论坛</dt>
					<dd >淘宝618大促报名</dd>
					<dt >安全</dt>
					<dd>淘宝618大促报名</dd>
					<dt >公益</dt>
					<dd >淘宝618大促报名</dd>
				</dl>
				<div class="nr-user-sec">
					<div>
						<div><div class="nus-charge"></div><span>充话费</span></div>
						<div><div class="nus-travel"></div><span>旅行</span></div>
						<div><div class="nus-insure"></div><span>车险</span></div>
						<div><div class="nus-game"></div><span>游戏</span></div>
					</div>
					<div>
						<div><div class="nus-lottery"></div><span>彩票</span></div>
						<div><div class="nus-movie"></div><span>电影</span></div>
						<div><div class="nus-hotel"></div><span>酒店</span></div>
						<div><div class="nus-money"></div><span>理财</span></div>
					</div>
				</div>
				
			<section>
		</nav>
	</body>
<html>

共性选择器部分

body,body*{
	margin:0;
	padding:0;
	font:12px/1.2 arial,"Microsoft Yahei";
	color:#333;
	outline:none;
	border:none;
	box-sizing:border-box;
	
}

类选择器部分

body{
	background-color:#dedede;
}


.header{
	width:100%;
	height:157px;	
}

.nav{
	margin:0 auto;
	width:1170PX;
	height:522px;
	display:flex;
}

.nav-left{
	width:900PX;
	height:522px;
	background-color:orange;
}

.nav-right{
	flex-grow:1;/*将父盒子nav剩余的宽全部交给子盒子nav-right*/
	height:522px;
	background-color:white;
}

.nr-user{
	padding:10px 0;
	height:130px;
	background-color:#eee;
	background:#fff url(../resource/imgs/taobao.png)center no-repeat;/*调用图片地址，由于内容与表现分离，因此地址栏前要加上../*/
	background-size:cover; /*让图片自动变动尺寸填充到盒子中去，防止图片内容的丢失*/
}

.nr-user-icon{
	margin:0 auto;/*让子盒子相对于父盒子水平居中*/
	width:50PX;
	height:50px;
	background-color:#eee;
	border-radius:25px;
	background:url(../resource/imgs/head.jpg)center no-repeat;
}

.nr-user-unlogin{
	margin:2px 0;
	height:17px;
	line-height:17px;
	text-align:center;
	font-size:12px;
	color:#3c3c3c;
}

.nr-user-two{
	padding:0 30px;
	height:17px;
	display:flex;
	justify-content:space-between;
	font-size:12px;
}

.nr-user-two>div{ /*弹性盒子模型中父盒子相同属性可以赋给子盒子，不同属性在子盒子中再做修改即可，可节约代码*/
	width:102px;
	height:100%;
	background-color:#ffe4db;
	border-radius:8.5px;
	color:#ff5000;
	display:flex;
	align-items:center;
}

.nr-user-two>div>span{
	display:block;
	width:16px;
	height:16px;
	line-height:16px;
	background-color:orange;
	margin-right:7px;
	border-radius:8px;
	background:url(../resource/imgs/small-icons.png) no-repeat;
	background-size:24px 597px;
}

.nr-user-two>div>.coin-icon{background-position:0 -572px;}
.nr-user-two>div>.club-icon{background-position:0 -528px;}

.nr-user-btns{
	height:40px;
	padding:0 10px;
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.nr-user-btns>div{
	width:78px;
	text-align:center;
	height:23px;
	line-height:23px;
	border-radius:5px;
	background:linear-gradient(to right,#ff5000,#ff6f06);/*线性渐变*/
	color:#fefefe;
	font-size:14px;
	font-weight:bold;
	cursor:pointer; /*改变鼠标图标形状：手*/
	user-select:none; /*设置标签文字不能选中*/
	
}




.nr-news{
	position:relative; /*相对定位*/
	padding-top:8px;
	margin-top:10px;
	height:90px;
	display:flex;
	justify-content:space-around;
	border-top:#efefef 1px solid;
	font-size:12px;
	
	
}

.nr-news>dt{
	font-weight:bold;
	cursor:pointer;
	user-select:none;
	height:22px;
	border-bottom:blue 2px solid;
	
}


.nr-news>dt.s,.nr-news>dt:hover{
	border-bottom-color:#f40;
	color:#f40;
}
/*
.nr-news>dt:hover+dd{
	display:block;
}*/
.nr-news>dd{
	position:absolute; /*绝对定位*/
	top:30px;  /*位移*/
	display:none;
	height:25px;
	line-height:25px;
	margin:6px 8px;
	overflow:hidden;   /*溢出隐藏*/
	padding:6px 0;
	
	
	
}

.nr-news>dd.s{
	display:block;
}


.nr-user-sec>div{
	height:77px;
	display:flex;
	border-left:#efefef 1px solid;
	
	
	
}

.nr-user-sec>div>div{
	height:54%;
	flex-grow:1;
	border:#efefef solid;
	border-width: 0 1px 1px 0;
	border:#efefef solid;
	padding:15px 0;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:space-between;
}

.nr-user-sec>div>div>div{
	width:24px;
	height:24px;
	background:url(../resource/imgs/small-icons.png) no-repeat;
	background-size:24px 597px;
	
}

.nr-user-sec>div>div>span{
	display:block;
	width:67.5px;
	text-align:center;
}

.nr-user-sec>div>div>.nus-charge{background-position:0 0;}
.nr-user-sec>div>div>.nus-travel{background-position:0 -88px;}
.nr-user-sec>div>div>.nus-insure{background-position:0 -48px;}
.nr-user-sec>div>div>.nus-game{background-position:0 -132px;}
.nr-user-sec>div>div>.nus-lottery{background-position:0 -176px;}
.nr-user-sec>div>div>.nus-movie{background-position:0 -220px;}
.nr-user-sec>div>div>.nus-hotel{background-position:0 -264px;}
.nr-user-sec>div>div>.nus-money{background-position:0 -308px;}

“山寨”版淘宝首页
在这里插入图片描述

五.总结

web前端中CSS用其自身的魅力将HTML展现的内容进行布局的精心“打扮”，让整个页面第一眼看上去显得高端大气上档次，提高了其竞争力。即便它不能完成人与互联网信息的交互，CSS作为HTML 的好搭档在web前端的发展中也是不能被忽视的。

broken snow

关注

0
点赞
踩
0

收藏

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

前言web前端虽然有HTML作为基本内容的编程语言，但是一个好的界面想要在众多前端中脱颖而出，对内容的布局如字体，颜色，排版等必须精美才能显示出其优势。因此，CSS语言就起到了它的作用。一.CSS简单介绍CSS本质上是样式表文件，用于控制web前端内容的表现形式。当前比较常见的HTML页面引入CSS的方式是内容与表现相分离，即把CSS 独立出来，这样比较清晰明了，修改时也很方便。二.CSS选择器HTML页面引入CSS只能通过选择器的调用来进行，有以下四种选择器的类别：ID选择器（ID指向的选
复制链接

扫一扫