CSS知识点1

蔚落 2022-04-12 13:44 254阅读 0赞

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    	
    	
    	
    	  
    	
    	<style type="text/css" media="screen">   /*嵌入样式表*/  
    		.style1{      /*这是class选择器的定义样式*/
    			color:red;    /*前景色*/
    			background-color: chartreuse;  /*背景色*/
    			background:repeat,blue;  /*将背景属性设置在一个声明中*/
    			background-image:image("Mysource/dog.jpg"); /*引用图像设置为背景*/
    			background-position: bottom;  /*设置图像的具体位置*/
    			background-repeat:repeat;   /*设置图像的重复方式*/
    			background-attachment: fixed; /*背景图片是否固定或随页面的其余部分滚动*/
    			/*font-size,line-height,word-space:三种  px：像素    em：默认1em     %:200%说明当前文本大小为原来的倍*/
    			font-size:16px;  /*字体大小*/
    			font-weight: bold;  /*字体粗细*/
    			word-space:2em;  /*设置字间距*/
    			line-height:2em;
    			font-style: italic; /*字体风格*/
    		    direction:rtl;  /*字体朝向*/
    			letter-spacing:2em;  /*字符间距*/
    			text-align: center; /*文本对齐方式*/
    			text-decoration:underline;  /*添加下划线神魔的*/
    			text-transform: lowercase;/*控制元素中的字母*/
    			font-family: 黑体;
    			/*  font-family:"黑体"，宋体    这样的话，如果浏览器系统中没有黑体这个字体，就会显示宋体*/
    			white-space: nowrap;/*指定页面无法自动换行   ：pre与pre标签作用相当*/
    		
    		}
    		#style2{      /*这是id选择器的定义样式*/ 
    			font-size:10px;  /*字体大小*/
    		}
    		h1 {       /*HTML选择器，作用在HTML标签上*/
    			font-family: 黑体;  /*字体*/
    		}
    		h1 h2{    /*派生选择器 作用在h1标签中h2标签中的对象*/
    			color:chartreuse;
    		}
    		#style2 p{   /*id选择器的派生选择器，作用在id为style2的p标签上*/
    			color:brown;
    		}
    		#style1 p{   /*class选择器的派生选择器，作用在class为style1的p标签上*/
    			color:brown;
    		}
    		/*多个选择器的样式一样的时候，分组选择器*/
    		h3,h4{
    			color:cadetblue;
    		}
    		/*伪类 
    		E:active  将样式表加到被激活的元素中,鼠标点击与释放间产生的事件
    		E:focus  将样式表加到被选中的元素中
    		E:hover  鼠标悬于的页面上方
    		E:link  未被访问的链接
    		E:visited  被访问的链接
    		E:first-child  将特使的样式添加到页面对象的第一个元素中
    		E:lang:  允许设计者定义指定的页面中所使用的语言
    		*/
    		q:lang(smile){   /*q是固定的*/
    		quotes: "Hello World" "!";
    		}
    		/*属性选择符
    		E[attr]  选择具有attr属性的E元素
    		E[attr="val"]  选择具有attr属性且属性值等于val的E元素
    		E[attr~="val"]  选择具有attr属性且属性值为一个用空格分隔的字词列表，其中一个等于val的E元素
    		E[attr|="val"]   选择具有attr属性且属性值为一个用连字符分隔的字词列表，其中一个等于val的E元素
    		E[attr^="val"]  选择具有attr属性且属性值以val开头的E元素
    		E[attr$="val"]   选择具有attr属性且属性值以val结尾的E元素
    		E[attr*="val"]  选择具有attr属性且属性值包含val的E元素*/
    		li[lang^="a"]{
    			background-color: aquamarine;
    		}
    		/*结构伪类选择符
    		E:root   E所在文档的根元素，其实就是html
    		E:not(s) E中不匹配选择符s的其它元素E
    		E:empty  E中不包含子节点的元素E
    		E:target  当前链接地址指向的E元素E
    		E:first-child 父元素的第一个子元素  E  
    		E:last-child 父元素的最后一个子元素E，
    		E:nth-child（n） 父元素的第n个子元素E
    		E:nth-last-child（n）  父元素代数第n个子元素 E
    		E:only-child  父元素仅有的子元素E
    		E:only-of-type  父类可以有多个子元素，但是子元素E只能有一个匹配成功
    		E:nth-of-type:  父元素的第n个E元素
    		E:nth-last-of-type: 父元素的倒数第n个E元素
    		E:first-of-type 父元素的第一个E元素
    		E:last-of-type  父元素的最后一个E元素
    		*/
    		li:nth-child(2){      
    			background-color:bisque;
    		}
    		/*UI元素伪类选择符
    		E:checked  匹配form表单上处于选中状态的E，（imput type=radio或checkbox)
    		E:enabled:form表单中中可用状态
    		E:disenabled: form表单中不可用状态*/
    		
    		/*伪元素选择符
    		E::first-leter: 第一个字符
    		E::first-line: 第一行
    		E::before: 设置在对象前发生的内容，和content属性一起使用
    		E::after: 设置在对象后发生的内容，和content属性一起使用
    		E::selection: 设置对象被选择时的颜色
    		*/
    		/*content属性为元素添加内容*/
    		li:nth-of-type(3)::before{
    			/*normal默认不加  none如果有指定的添加内容设置为空  string：文本  counter：计数器  attr（at） at的属性值
    			url（别）外部资源  inherit*/
    			content: url(MySource/images/Card/Plants/Blover.png);
    		}
    		li[lang$="b"]{
    			font-size: 36px;
    			color: blueviolet;
    			/*可以设置多种阴影效果，用逗号隔开*/
    			text-shadow: 5px 5px 3px #333;   /*文本阴影，参数为垂直方向偏移距离；水平方向便宜距离，边缘模糊程度，阴影颜色*/
    		}
    		/*可以设置描边效果，就是在四边设置阴影效果，并且不设置边缘模糊程度(默认0）*/
    		li[lang="1"]{
    			font-size: 36px;
    			color: blueviolet;
    			/*上面和左边白突起；下面和右面白凹陷*/
    			text-shadow: -1px 0 #333,0 -1px #333,1px 0 #333,0 1px #333; 
    		}
    		/*发光，不设置偏移，只设置羽化*/
    		li[lang="2"]{
    			font-size: 36px;
    			color: blueviolet;
    			width:250px;  /*设置宽度*/
    			/*可以设置描边效果，就是在四边设置阴影效果，并且不设置边缘模糊程度(默认0）*/
    			/*上面和左边白突起；下面和右面白凹陷*/
    			text-shadow: 0 0 10px #333; 
    			/*文本过长的时候的截断显示*/
    			overflow: hidden;/*溢出内容设为隐藏*/
    			white-space:nowrap;/*强制单行显示*/
    			text-overflow:ellipsis;   /* clip截掉  ellipsis/ellipsis word省略标记代替最后一个字符/词*/
    		}
    		/*文字对齐*/
    		/*HSL,HLSA，RGBA色彩模式  色调，饱和度，亮度，透明度*/
    		li[lang="3"]{
    			border:3px solid #333;
    			color:hsl(0,100%,50%);
    			background-color: hsla(40,50%,50%,0.1);
    			padding: 10px;
    			width: 220px;
    			font-size: 36px;
    			/*word-wrap边界换行属性。normal允许内容超出边界；break-word内容将在边界换行*/
    			word-wrap: break-word;
    		}
    		/*word-break属性
    		参数： normal : 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
    　　　break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
    　　　keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本
    		*/
    		
    		/*有的时候客户端没有某些字体，可以使用服务器端的字体
    		@font-face{
    			font-family: myFont; 声明字体名称
    			src:local("黑体");         现在客户端查，要是客户端不能显示，再在服务器端加载字体
    			    url(字体地址) format("truetype");
    		}
    		p{
    			font-family: myFont;  这里使用
    		}*/
           /*RGBA  A:透明度和    opacity透明度*/
    		li[lang="4"]{
    			background:url(MySource/images/Card/Plants/CherryBomb.png);
    			color:rgba(255,153,0,0.5);
    			opacity: 0.5;  /*透明度*/
    		}
    		/*body{
    			放置多个背景图片
    			background:url(MySource/dog.jpg) 120px 110px no-repeat,
    				url(MySource/images/Card/Plants/Blover.png) 400px 10px no-repeat,
    				url(MySource/images/Card/Plants/BoomWallNut.png) no-repeat
    		   background属性
    		    背景图的原点位置    边框区域     内边距区域       内容区域
    		   background-origin:border-box|padding box|content box
    		   background-image:图片的地址
    		   指定图片的显示区域
    		   background-clip:border-box|padding box|content box
    		   背景图片大小,4种
    		   background-size:123px,155px;  直接指定宽和高
    		   background-size:50% 50%;  占原图像的百分比  
    		   background-size:cover;    放大缩小到铺满背景区域
    		   background-size:contain;   放大缩小到正好适应背景区域，不一定铺满
    		   背景图片是否及如何重复铺排
    		   background:repeat|no repeat|repeat-x|repeat-y
    		   设置背景图片的位置
    		   background-position:left top|right top|left bottom|right bottom
    		}*/
    		/*设置圆角边框，多色边框*/
    		li[lang="5"]{
    			width: 200px;
    			height: 80px;
    			background-color: aqua;
    			border: 10px solid;
    			border-radius:20px 30px 40px 50px;  /*圆角矩形 左上 右上 右下 左下*/
    			/*等价于
    			border-top-left-radius:20px;
    			border-top-right-radius:30px;
    			border-bottom-right-radius:40px;
    			border-bottom-left-radius:50px;*/
    			/*border-radius还可以指定成椭圆，派生的四个子属性不可以
    			border-radius:20px/40px;   20px代表水平半径，40px代表垂直半径
    			/*多色边框，也可以分成top,right,bottom,left四个子属性赋值*/
    			border-color:#001000 #e20 #a30 #d40 #f50;
    	    }
    		li[lang="6"]{
    			/*图像边框 border-image;有很多派生子属性 top right bottom left top-left top-right bottom-left bottom-right*/
    			width: 200px;
    			height: 80px;
    			border:20px solid; 
    			/*图像切片. 若上下两个方向偏移值之和大于等于图像高度且左右两个方向之和大于等于图像宽度时，只有四个角能得到切片
    			           若上下两个方位的偏移值都大于等于图像高度且左右两个方向偏移值都大于图像宽度时，四个角都能得到完整图像的切片*/
    		/*子属性border-image-repeat也可以设置图像切片的显示方式  round重复而且根据宽度调整  repeat重复不会调整 strech默认拉伸*/
    			border-image:url(MySource/images/Card/Plants/Blover.png) 30 30 30 30/10px round repeat; /*最多写两个；上下，左右*/
    			/*10px是边框的宽度，也可以由border-width设置。会根据边框的大小自动缩放切片*/
    		}
    	</style>
    </head>
    
    <body>
    <h1 style="color: blue">CSS语法</h1>    
    	<ul>
    	  <li lang="af">西游记</li>
    		<li>三国演义</li>
    	  <li>王源</li>
    		<li class="style1">你好</li>
    		<li>魔君一笑<q lang="smile">傲视天下</q></li>
    	  <li id="style2">你好</li>
    	  <li lang="eb">文本阴影</li>
    	  <li lang="1">描边效果</li>
    	  <li lang="2">发光效果，文本过长的时候的截断显示。CDC第三次多少</li>
    	  <li lang="3">文字对齐的边界换行属性</li>
    		<li lang="4">RGBA和透明度<img src="MySource/images/Card/Plants/BoomWallNut.png"></li>
    		<li lang="5">圆角边框</li>
    		<li lang="6">边框图像切片</li>
    		<li lang="7"></li>
    		<li lang="8"></li>
    	</ul>
    </body>
    </html>