二阶段（课2）

最新推荐文章于 2022-05-05 15:13:40 发布

倔迪

最新推荐文章于 2022-05-05 15:13:40 发布

阅读量274

点赞数

本文链接：https://blog.csdn.net/Girl_Cool/article/details/99932416

版权

8.20（周二）：css

一.CSS概述

CSS :层叠样式表
CSS作用：修饰美化html网页；外部样式表提高代码复用性从而提高工作效率； html内容与样式表现分离，便于后期维护。
CSS特点：丰富的样式定义；易于使用和修改；多页面应用；层叠；页面压缩
CSS语法规则：选择器 + 一条或多条声明
注意事项：
a.如果值为若干单词，则要给值加引号；font-family: “黑体”,“华文彩云”,“微软雅黑”,“arial”;
b.多个声明之间使用分号;分开；
c.css对大小不敏感，如果涉及到与html文档一起使用时，class与id名称对大小写敏感
d.css注释/…/
CSS使用方式：内联样式>内部样式>外部样式
CSS基本选择器：
a.标签选择器：html标签{属性:属性值}
b. id选择器：#id值{属性:属性值}
c.class选择器：.class名{属性:属性值}
伪元素选择器：主要是针对a标签，一般按lvha的顺序书写，hover使用最多

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>伪元素选择器</title>
		<style type="text/css">
			/*链接标签的四种状态
			 a:link 初始状态
			 a:hover 鼠标经过状态
			 a:active 激活状态
			 a:visited 访问过后
			 * */
			/*lvha的顺序书写*/
			/*a:link{color:black;}
			a:visited{color: #8A2BE2;}
			a:hover{font-size: 30px;}
			a:active{color: red;}*/
			/*a 一般使用 (1)设置 a    (2) a:hover*/
			a:hover{text-decoration: underline;}
			li:first-child{color: red;}
			li:last-child{color: green;}
		</style>
	</head>
	<body>
		<h2>伪元素选择器的使用</h2>
		<a href="http://www.baidu.com">去百度</a>
		<ul><li>苹果</li><li>橘子</li><li>葡萄</li></ul>
	</body>
</html>

层级选择器

后代选择器：
	div p{...}  表示div中的p标签，所有的p,后代
	div span{....} 表示div中的span标签，包括所有的span，后代
子代选择器：
	div>span{....} 表示 div中有一个span， span是子代
相邻兄弟  +
通用兄弟 ~

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>层级选择器</title>
		<style type="text/css">
			/* "*"全局选择器  "h1,h2{}"群组选择器 */
			*{font-size: 20px;margin: 0;padding: 0;}
			/*空格 后代选择器*/
			/*div span{color: red;}
			*/
			/*> 子代选择器*/
			div>span{color: red;}
			div ~ p{color: blue;}
		</style>
	</head>
	<body><h2>层级选择器的使用</h2>
		<p>xxxxx</p>
		<div><span>span1</span><ul><li><span>苹果</span></li></ul></div>	
		<p>我爱java<span>span2</span>	</p>
		<p>我爱故乡<span>span2</span>	</p>	
	</body>
</html>

二.CSS属性

2.1文字和文本属性

文字属性：
字体大小:font-size 字体类型:font-family
字体样式:font-style 字体粗细:font-weight
文本属性：
文本颜色：color
文本缩进(一般以em为单位)：text-indent
文本修饰(例如下划线): text-decoration
对齐方式:text-align
单词(英文)间距：word-spacing
单词(汉字)间距：letter-spacing
行高(居中使用):line-height

2.2背景属性

				background-color: salmon;
				height: 500px;
				background-image: url(../img/05.jpg);
				background-repeat:no-repeat;
				background-position: center;
				background：4合一，简写不分顺序

2.3列表属性

list-style-type:decimal;改变列表的标志类型
list-style-image: url("images/dog.gif");用图像表示标志
list-style-position: inside;确定标志出现在列表项内容之外还是内容内部 
简写
list-style: decimal url(img/001.png) inside;
去掉样式:
list-style:none;
list-style-type:none;

2.4尺寸显示轮廓属性

width:设置元素的宽度　
height:设置元素的高度
显示属性(display)
display: none 不显示　block:块级显示　inline:行级显示（没有高度和宽度）　inline-block:行级块（既有高度和宽度，也可以在一行）
轮廓（outline）
	绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
	常用属性：
outline-style:solid(实线)/dotted(虚线)/dashed(虚线，虚线的每段较长)/double(框为空心);设置轮廓的样
outline-color:red;设置轮廓的颜色
outline-width:10px设置轮廓的宽度

2.5浮动属性（float）

clear去除浮动影响：
如果想使用float：right，就不能写width,因为写了width，默认文字从左开始,float就不起作用了
可能的值

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

2.6定位属性（postion）

z-index控制元素的层叠位置

static：静态定位（默认定位方式）
relative：相对定位，相对于原来的位置偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute：绝对定位，绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于视窗本身。
fixed：固定定位，元素框的表现类似于将 position 设置为 absolute，不过其位置相对于视窗本身。

三.CSS盒子模型

3.1边框属性

border-style:边框样式，值有以下情况：
				solid:实线
				double:空心线
				dashed:虚线组成的边框
				dotted:圆点组成的边框
border-color:边框颜色
border-width:边框宽度
简写
border: 1px solid red;

3.2边距属性

margin:外间距,边框和边框外层的元素的距离(top right bottom left)
padding:内间距,元素内容和边框之间的距离(top right bottom left)
盒子模型的实际的宽度：width+2*（padding+border+margin）
盒子模型的实际的高度：height+2*（padding+border+margin）

3.3实现div水平/垂直居中显示

/*使用margin实现水平居中*/
margin: 0 auto;  /*0  上下 0  左右 auto*/

弹性盒子：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

 /*弹性盒子*/
				display: flex;
              	 /*垂直对齐*/
				align-items: center;
              	 /*水平对齐*/
				justify-content: center;

四.CSS3扩展属性

圆角属性：border-radius
用于向方框添加阴影： box-shadow
属性规定背景图片的尺寸：background-size：200px 300px;
为指定元素使用多个背景图像：background-image

background-image: url(../img/copy003.jpg),url(../img/11.bmp);
background-repeat: no-repeat,no-repeat;

倔迪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二阶段（课2）

8.20（周二）：css一.CSS概述CSS :层叠样式表CSS作用：修饰美化html网页；外部样式表提高代码复用性从而提高工作效率； html内容与样式表现分离，便于后期维护。CSS特点：丰富的样式定义；易于使用和修改；多页面应用；层叠；页面压缩CSS语法规则：选择器 + 一条或多条声明注意事项：a.如果值为若干单词，则要给值加引号；font-family: “黑体”,“华文彩云...
复制链接

扫一扫