当前位置： 移动技术网 > IT编程>网页制作>HTML > CSS

CSS

2018年03月07日  | 移动技术网IT编程  | 我要评论

文章目录

CSS

定义

CSS: Cascading Style Sheets 层叠样式表 作用就是用来美化HTML标签
HTML标签的主要作用，就是用来定义网页元素，但是HTML能够定义网页元素，但是还会自带一些属性，来控制这个网页元素的展示样式。

HTML 自带的属性很贫乏，有时不能满足我们更加丰富的样式需求，那这个时候我们的CSS就登场了，CSS里面提供了非常丰富的样式属性，能够满足我们对样式的需求。也就是说有了CSS之后，我们要控制这个元素长什么样式，就交由CSS来控制，基本上不用HTML标签自带的属性来控制样式。
	这样做的目的，就是用来解耦，HTML定义网页元素 CSS用来控制元素的展示样式。

CSS页面定位

页面元素的定位方式有两种：
		 相对定位：默认方式 第一个元素参照原点，后来的元素参照之前的元素。
		 绝对定位：所有元素只参照原点位置，元素之间相互不参照。
		 position: relative; 相对定位
		 position:absolute; 绝对定位
		 如果选用了绝对定位：我们可以设置元素距离原点的上下左右位置
		 top
		 left
		 right
		 bottom
		 
		 
		 如果用的是相对定位要设置元素之间的间距，用
		 margin-top
		 margin-left
		 margin-right
		 margin-bottom
		 
		 上下间距Css属性比如：margin-top margin-left 对行标签不起作用。
		 块标签：上下左右的间距属性都会起作用
		 
<!-- button 行内块标签 具有行标签和块标签的一些特点 -->
		<button type="button" style="margin-top: 500px;">按钮</button>
		<button type="button">按钮</button>
		<button type="button">按钮</button>

行标签和块标签的转换

display: block; 转换成块标签 
display:inline; 转换成行标签
display:inline-block; 转换成行内块标签
display: none; 隐藏标签，隐藏之后所占的位置不在了
visibility:hidden; 隐藏标签，标签原来占的位置还是在的
visibility:visible; 显示

HTML和CSS结合方式

 方式1：内联样式  是将CSS代码写到HTML标签的内部
		 每个标签都有一个style属性，他的值就写CSS代码
		 CSS代码的语法是  属性名:值 值 值
		 style="color: red;font-size: 500px;"
		 层叠：多个样式控制同一个标签，会叠加生效。
		 内联样式的写法缺点：一次只能控制一个标签所展示的样式，代码复用性低，且书写凌乱，不是首选写法。
		 
方式2：内部样式 将CSS代码抽离出来，写在一个固定的位置，好处就是能够提高代码的复用性。但是这种方式，得配合选择器。
		 好处就是一次可以控制一个标签或多个标签的展示样式。
		 
		 
方式3：将CSS代码统一抽取到一个文件当中来编写。他就可以控制多个页面上的元素的展示样式，复用性更高，开发首选

内部样式：

内部样式，需要配合选择器

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 选择器：就是选中一个或多个标签的一种语法 */
			/* id选择器 一次只能选中一个标签 */
			#myh1{
				color: red;
				font-size: 50px;
			}
			#myh2{
				color: yellow;
				font-size: 50px;
			}	
		</style>
	</head>
	<body>
		<!-- id 是唯一的 多个标签的id值不要相同 -->
		<h1 id="myh1">标题标签</h1>
		<h2 id="myh2">标题标签2222</h2>
	</body>
</html>

选择器种类：
包含选择器 
标签名选择器：一次可选择多个标签
类选择器
属性选择器
通配符选择器 *
伪类选择器：是选择状态的 <!-- 超链接标签有四种状态
		              1.链接状态
		              2.鼠标悬浮状态
		              3.鼠标按下状态
		              4.链接访问过后的状态
		           其中 鼠标悬浮状态 鼠标按下状态 这两种状态对于其他标签，也是有用的
		            -->
相邻选择器 + ~：相邻所有选择器
子选择器 >  子标签没有单独去设置样式，会继承父标签的样式

选择器的优先级：
多个选择器，选中了同一个标签，控制的样式如果没有冲突，那就叠加生效。
如果说有冲突时：根据选择器的优先级来的，优先级高的选择器他的控制强度比较大。
	内联样式>id选择器>类选择器>标签名选择器
				
优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

CSS的一些属性

浮动属性：让块标签一字排开 float
背景属性：background-color: #98FB98;
	    background-image: url(img/buyanqi.jpg);
		/* 背景图片不要重复 */
	    background-repeat:no-repeat;
		/* 背景图片尺寸 左右拉伸 上下拉伸 */
		background-size: 100% 800px;
		/* 固定背景图片 */
		background-attachment: fixed;
        /* 背景图片位置 第一个值为水平位置 第二个为垂直位置 */
        background-position:10% 50px; 
边框属性
段落的设置：text-indent首行缩进
          line-height行高
内间距：#wai{
				width: 500px;
				height: 500px;
				border: 1px solid black;
				background: yellowgreen;
				/*站在外框的角度去设置 内间距 */
				padding-top: 200px;
				padding-left: 100px;
				/* 设置内间距时，不要撑大外框 */
				box-sizing:border-box;
			}
			#nei{
				width: 200px;
				height: 200px;
				border: 1px solid black;
				background: cyan;
字体属性：text-transform 转换大小写
        cursor 鼠标指针的样式
        font-style 样式
        font-weight 加粗
        text-shadow 文字阴影：左右位置 上下位置 阴影范围 阴影颜色
        
弹性盒子：
是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间                
        display: flex 设置弹性盒子
        flex-direction 排列方式
        margin:auto;  盒子的层上下左右都居中
        flex-wrap:自动换行 或列

            
transform动画
transform: translate 位移动画 左右移动 上下移动
transform: rotate 旋转动画
transform: scale 缩放动画    transform: scale(2) rotate(30deg)两个动画同时进行
transform: skew 扭曲动画
  
过渡动画 transition 
            transition:all 1s 0s linear
                       过渡的属性 过渡时长 延时过渡  过渡速率方式
            
自定义动画 格式： @keyframes 动画名{
                 from{}
                  to{}
                }

                /* 开启动画
				animation: mydh 2s 1s; */
				animation-name: mydh;
				animation-duration: 2s;
				animation-delay: 0s;
				animation-iteration-count: 10;//播放次数
				animation-timing-function: linear;
/* 动画执行完停留   backwards最开始的那一帧 forwards 停留在最后一帧 */
animation-fill-mode:forwards;


animation-direction:alternate-reverse;               
                /* normal	默认值。动画按正常播放。
				reverse	动画反向播放。
			   alternate	动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
					alternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
					*/

				/* 动画开启或暂停 */
				animation-play-state: running;

本文地址：https://blog.csdn.net/weixin_46685538/article/details/107239594

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网