CSS笔记day29

红鲤驴

于 2020-07-06 12:12:10 发布

阅读量84

点赞数 1

本文链接：https://blog.csdn.net/m0_46326122/article/details/107154708

版权

CSS

CSS概念：
Cascading Style Sheets 层叠样式表 作用就是用来美化HTML标签

HTML标签他的主要作用，就是用来定义网页元素，但是HTML能够定义网页元素，但是他还会自带一些属性，来控制这个网页元素的展示样式。

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

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


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

css的作用
  	1.实现了样式和html的代码分离。
  	2.弥补html对属性的的控制不足。
  	3.精确的控制页面的布局。
  	4.可以提高页面的执行效率。
  	5.css还有特殊的功能。

css的特性
	1.继承性
	2.层叠性

CSS基本语法
<style type="text/css">
选择器{
       属性1:属性值；
       属性2：属性值
       。。。。。。
     }
</style>

选择器
	1.类选择器
<html>
 	<head>
  		<title> New Document </title>
  			<style>
    			.p1{ color:red }	//类名选择
  			</style>
 	</head>
 	<body>
    	<p>查看文字内容</p>
	 	<p>查看文字内容</p>
	  	<p class="p1">查看文字内容</p>
	   	<p>查看文字内容</p>
	    <p>查看文字内容</p>
 	</body>
</html>

	2.id选择器
<html>
 	<head>
  		<title> New Document </title>
  			<style>
				#p2{ font-size:100px;}	//id名选择
  			</style>
 	</head>
 	<body>
    	<p id="p2">查看文字内容</p>
	 	<p>查看文字内容</p>
	  	<p class="p1">查看文字内容</p>
	   	<p>查看文字内容</p>
	    <p>查看文字内容</p>
 	</body>
</html>

	3.标签选择器
<html>
 <head>
  <title> New Document </title>
  	<style>
		p{color:red;}	//标签名选择
  	</style>
 </head>
 <body>
    <p>查看css的效果</p>
	<p>查看css的效果</p>
	<p>查看css的效果</p>
 </body>
</html>

	4.包含选择器
<html>
 <head>
  <title> New Document </title>
  	<style>
		ol  ul  li{font-size:50px; color:red}
  	</style>
 </head>
 <body>
    <ol>
		<li>zhangsan
		<li>23
		<ul>
     		<li>lisi
		</ul> 
	</ol>
 </body>
</html>

	5.伪类
 1.未连接     a:link
 2.已经访问链接  a:visited
 3.进入链接  a:hover
 4.激活（按下）状态  a:active
其中的hover 和active 可以用于其他控价
<html>
 <head>
  	<title> New Document </title>
  		<style>
    		a:hover{font-size:50px;}
  		</style>
 </head>
 <body>
    <a  href="#">我的链接</a>
 </body>
</html>


	6.通配符选择器
* {

}
选择所有标签

CSS使用

1.在html文件头部使用
<html>
 <head>
  <title> New Document </title>
  <!--style  说明所要使用的标记 -->
  <!-- type="text/css"  说明这是一段css代码-->
 	<style  type="text/css">
 		h3{color:black;font-size:35px;font-family:黑体 }
 		p{background:yellow;color:red;font-family:宋体}
 	</style>
 </head>
 	<body>
   		<h3>在html文件的头部使用css</h3>
   		<hr>
   		<p>在html文件头部应用css(层叠样式表)</p>
 	</body>
</html>

2.在html文件内部使用
<html标记  style="样式的属性1:样式的属性1;样式的属性2:样式的属性2;......">

<html>
 <head>
  <title> New Document </title>
 </head>
 	<body>
  		<h1  style="color:red;font-size:50px;font-family:黑体">标签内部使用css</h1>
  		<hr>
  		<p style="background:cyan;color:red;font-family:宋体">在html标记的内部使用css</p>
 	</body>
</html>

3.使用外部css文件
基本语法：
   <head>
     <link rel="stylesheet"  type="text/css"  href="css样式表文件的存放位置">
      rel="stylesheet"   是指在html文件中使用的是外部样式表文件
      type="text/css"  指明该文件的类型是样式表文件
      href="css样式表文件的存放位置"    样式表文件的地址（绝对路径或相对路径）
   </head>

第一：  编写外部css文件（后缀名【.css】）
	h3{
        color:red; font-size:35px;font-family:黑体
	}
	p{
        background:yellow; color:red;font-family:宋体
	}

第二：  
<html>
 <head>
  <title> New Document </title>
  <link   rel="stylesheet"   type="text/css"  href="mycss.css">
 </head>

 <body>
   <h3>使用外部css</h3>
   <hr>
   <p>在html文件使用外部css(层叠样式表)</p>
 </body>
</html>

字体

font-size:绝对尺寸/关键字/相对尺寸/百分比
 关键字:
xx-small(极小)
x-small（较小）
smaller,small（小）
medium（标准）
large（大）

font-style  设置字体的样式（设置字体是否为斜体字）
normal----正常显示字体
italic---斜体字
oblique--歪斜体（倾斜角度大一点）

font-weight  设置字体的加粗
取值：
normal  ---- 正常显示
bold ----粗体（数字700粗细值）
bolder ---加粗
lighter ---细体（比正常字体稍微细一点）
number  ----数字型（一般整百设置，有9个级别（100----900）数字取值越大越粗）

text-shadow设置字体的阴影
规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：
text-shadow: 5px 5px 5px #FF0000;

font-variant 设置字体的变体
设置字体是否显示为小型的大写字母
主要用于设置英文字体
normal  --正常字体
small-caps  表示英文字母显示为小型的大写字母

1、color  
   英文单词来设置颜色“red”  红色
   RGB值  颜色码
2、设置背景颜色
   	background-color
3、设置背景图片
	background-image
  	   
背景的设置和边框的设置：
背景附件的设置
background-attachment
是指设置背景图片是否随着滚动条的移动而移动
scroll  ---表示背景图片随着滚动条的移动而移动
fixed---表示背景图片固定在页面上不动，不随滚动条移动而移动
背景附件的设置
background-attachment
是指设置背景图片是否随着滚动条的移动而移动
scroll  ---表示背景图片随着滚动条的移动而移动
fixed---表示背景图片固定在页面上不动，不随滚动条移动而移动

设置背景图片的重复：
background-repeat
  设置背景图片总是在水平和垂直方向重复显示铺平整个网页。
  repeat   背景图片在水平和垂直方向平铺
  repeat-x  背景图片在水平方向平铺
  repeat-y  背景图片在垂直方向平铺
  no-repeat  背景图片不平铺

背景图片的位置设置：
background-position
关键字            百分比              位置说明
top left          0%  0%              左上位置
top center        50%  0%             靠上居中
top right         100%  0%            右上位置
left  center      0%  50%             靠左居中
center center     50%  50%            正中位置
right center      100%  50%           靠右居中
bottom  left      0%  100%            左下位置
bottom  center    50%  100%            靠下居中
bottom  right     100%  100%           右下位置

边框设置：
边框的样式
border-style
基本语法
border-style
border-top-style
border-bottom-style
border-left-style
border-right-style
取值：
none  没有边框
dotted  点线
dashed  虚线
solid   实线
double  双实线
groove  凹型线
ridge   凸型线
inset   嵌入式
outset  嵌出式
取同一个值：四条边框线是同一个线型
取两个值：上下边框使用第一个取值，左右边框使用第二个取值
取三个值： 上边框取第一个值，左右取第二个值，下边框取第三个值
取4个值：上第一个值，右取第二个值，下取第三个值，左取第四个值

边框的属性设置和边距/填充：
边框的宽度
  border-width
  基本语句：
border-width
border-top-width
border-bottom-width
border-left-width
border-right-width
取值；
thin  ----细边框
medium  ---中等边框
thick--粗边框
长度---数字

边框颜色：
border-color

  基本设置语法：
   border-color
   border-top-color
   border-bottom-color
   border-left-color
   border-right-color

   取值
   英文单词  “red”代表红色
   RGB  颜色码

边框的综合设置和边距：
border
边距指的是设置网页中某个元素的四边和网页中其他元素之间的空白距离
上边距  margin-top
下边距  margin-bottom
左边距  margin-left
右边距  margin-right
复合设置 margin

取值：
  数字----长度
  百分比---是相对于上一级元素的百分比，允许是负数
  auto ---自动提取边框的值，默认值

边框圆角：
border-radius设置边框圆角
border-radius:50px;
先把边框设置后再设置圆角
div { border:2px solid; border-radius:25px;  
   
边框的阴影：    
box-shadows: 10px 10px 5px #888888;//添加阴影
X方向的偏移像素
Y方向的偏移像素
模糊的像素值
阴影颜色

内间距：    
用来设置边框和其内部的元素之间的空白距离

上边距  padding-top
下边距  padding-bottom
左边距  padding-left
右边距  padding-right
复合设置 padding

取值：
数字---长度
百分比

css对文字的排版：
调整字符间距
letter-spacing
用来控制字符之间的间距，这个间距实际上就是在浏览器中所显示的字符间的空格距离。
取值：
  normal ---表示正常显示（默认）
  长度--可以使用负数，带上单位
  单位px(像素)

添加文字的修饰：
为文字添加如下划线，删除线等修饰
  text-decoration
  属性的取值：
  underline----添加下划线
  overline---添加上划线
  line-through--添加删除线
  blink---添加闪烁效果（只能在Netscape的浏览器中正常显示）
 none--没有任何的修饰

文本的对齐方式：
text-align
用来控制文本的排列和对齐方式

属性的取值：
left--左对齐
right--右对齐
center--居中对齐
justify--两端对齐

字母大小写转换：
text-transform:uppercase;

段落的缩进设置：
text-indent  
  用来控制每个段落的首行缩进的距离。
  属性取值：
  长度（数字）带上单位
  百分比相对于上一级元素的宽度
em 倍数
对p标签中的文本进行首行缩进

列表属性：
CSS文字阴影效果
text-shadow:10px 20px 30px red;   

vertical-align:middle;
CSS 列表属性
复合属性
list-style:square inside url('/i/arrow.gif');
list-style:none 去掉列表的标记图形
list-style-image:url(a.jpg);  列表的标记图片
list-style-position: inside/outside;  列表的位置
list-style-type:disc/circle/square/......; 列表前面的图型

katakana-iroha 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名） 


行高的设置：
line-height
  用来控制文本内容之间行间距
  属性取值
  normal---浏览器默认的行高
  数字--设置行高带上单位
  百分比----表示行高是该元素字体大小的百分比

彩色图片变白：
filter: grayscale(100%); 
filter: gray; 

放大缩小位移：
Transform
transform:rotate(30deg);//旋转30度
transform:translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素
transform:scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
transform:skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

过渡动画：
transition
格式：transition: width 2s; （应用于宽度，时间2秒）
渐变动画：transition: transition-property transition-duration transition-timing-	function transition-delay;
	transition-property:width;
	transition-duration:5s;
	transition-delay:2s;
	transition-timing-function：
	linear	规定以相同速度开始至结束的过渡效果。
	ease	规定慢速开始，然后变快，然后慢速结束的过渡效果。
	ease-in	规定以慢速开始的过渡效果
	ease-out	规定以慢速结束的过渡效果

transform动画：
/*位移动画  左右位置，上下位置*/
transform: translate(300px,200px);
/*transform: translateX(100px);*/
/*transform: translateY(100px);*/
/*旋转动画*/
transform: rotate(45deg);
/*transform: rotateX(45deg);*/
缩放动画
transform: scale(2);
/*transform: scaleX();*/
/*扭曲动画*/
transform: skew(45deg);
/*transform: skewX(35deg);*/

自定义动画：
Animation
格式：animation:myfirst 5s;（myfirst动画名，5s动画时间）
@keyframes myfirst 
{ 0% {background: red;} 
25% {background: yellow;} 
50% {background: blue;} 
100% {background: green;} }
@keyframes myfirst 
{ from {background: red;} 
to {background: yellow;}}

自定义动画详细属性：
混合调用语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;

单个使用属性
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。 infinite无限次
animation-direction	指定是否应该轮流反向播放动画。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state	指定动画是否正在运行或已暂停。

盒子模型

顺序排列，用于div设置显示方式为盒子模型给父布局设置，其子元素按父元素设置的效果排列：
	
	//设置盒子模型
	display: flex;
	// 排列方式横向或竖向 后面加上wrap可自动控制宽高
	flex-direction: row | row-reverse | column | column-reverse

	justify-content:flex-start | flex-end | center;		按方向居开始 中间  末尾	

	flex-flow:和上面的属性值相同 加上warp可以换行或换列
	例子：
	flex-flow:row wrap;  横向排列 如果排不下 自动换到下一行
	flex-flow:column wrap; 竖向排列 排不下 自动换列

	flex-wrap:wrap;//自动换行 或换列
	

	设置盒子模型display:
	flex;	后给其子元素设置margin:auto;	为自动居中
	例子：
	margin:auto;  盒子的层上下左右都居中
	margin:10px auto; 盒子的层 距离顶部10px  左右居中
	
	设置多个控件排列顺序：order:1;