zoukankan      html  css  js  c++  java
  • 4 css文本和文字样式

    CSS 文本样式:
    	通过文本属性,改变文字
    	*范围小的选择器生效优先级高于范围大的选择器
    	css样式属性之间没有先后顺序,有这条属性就行
    	如果对盒子没有指定宽高,那么盒子的宽高,由其子元素来撑开
    	选择器+声明叫做一条css描述
    	
    	缩进文本
    			p {text-indent: -5em;}//负位移
    			p {text-indent: 20%;}//百分数要参考父元素的宽度。只影响第一行,举例,如果将缩进值设置为 20%,元素的第一行会缩进 20%(参考其父元素宽度的)。
    			
    	水平对齐
    		text-align:center
       		line-height 
    		
    	字间隔
    		p.spread {word-spacing: 30px;}
    		p.tight {word-spacing: -0.5em;}
    		
    	字母间隔
    		h1 {letter-spacing: -0.5em}
    		h4 {letter-spacing: 20px}
    		
    	字符大小写转换
    		h1 {text-transform: uppercase}
    		h1 {text-transform: lowercase}
    		h1 {text-transform: capitalize}//首字母大写
    		h1 {text-transform: none}
    		
    	文本装饰
    		a {text-decoration: none;}
    		a {text-decoration: underline;}//下划线
    		a {text-decoration: overline;}
    		a {text-decoration: line-through;}
    		
    	处理空白符
    		p {white-space: normal;} //合并多余的空白符
    		p {white-space: pre;} // 不合并空白符,不忽略换行符
    		p {white-space: pre-wrap;} //不合并空白符,不忽略换行符,还允许自动换行。
    		p {white-space: pre-line;} /合并空白符,保留换行符, 还允许自动换行
    		
    	段落间距
    		p.big{line-height: 200%}//参考其父元素的行高
    		p.big{line-height: 20px}
    		p.big{line-height: 0.5}//0.5是什么
    		
    CSS 字体
    	字体的属性:那种字体、大小、加粗、风格(如斜体)和变形(如小型大写字母)
    	body {font-family: sans-serif;}//字体系列
    	font-family 字体
                    font-family: "宋体";
                    font-family:"微软雅黑"  
                    font-family:"微软雅黑","宋体";
                    font-family:"Microsoft Yahei","SimSun"
                    font-family:"Arial","Microsoft Yahei","SimSun"
    				font-family:arial,sans-serif;//字体系列至少2个字体,通用字体系列和特定字体系列
    				只有当字体名中有一个或多个空格(比如 New York),或者如果字体名包括 # 或 $ 之类的符号,才需要在 font-family 声明中加引号。
    	font-style 设置斜体
    		p.normal {font-style:normal;}//字体样式,如斜体   italic; 让文字倾斜
    			oblique 与 italic区别:
    				italic会找到新的斜的字型替代
    				oblique是普通的倾斜
    				中文一律用italic  
    	font-variant
    		设定小型大写字母
    		p {font-variant:small-caps;}
    		p.normal {font-variant: normal}
    		
    	font-weight 设定字体粗细
    		p.thick {font-weight:bold;}//700或bold字体 加粗
    		p.thicker {font-weight:400;}//400或normal 表示正常
    		
    	font-size 设置字体大小
    		h1 {font-size:3.75em;} //字体大小
    		h1 {font-size:60px;}
    		
    	字体简写属性:
    		p.ex1{font:italic arial,sans-serif;}
    		font: italic bold 14px/28px arial,sans-serif;//无顺序书写,不同描述用空格隔开,一个描述用逗号隔开
    		
    	em
    		W3C 推荐使用 em 尺寸单位
    		浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。	
    		如果要避免在 Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替 pixels
    		1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体大小时,em 的值会相对于父元素的字体大小改变。	
    		结合使用百分比和 EM
    			在所有浏览器中均有效的方案是为 body 元素(父元素)以百分比设置默认的 font-size 值:
    
    文本阴影
    	CSS3 文本阴影
    	h1{
    	text-shadow: 5px 5px 5px #FF0000;
    	}
    	text-shadow: h-shadow v-shadow blur color;
    	h-shadow 水平阴影的位置
    	v-shadow 垂直阴影的位置
    	blur  模糊的距离,值越大越模糊
    	color 阴影的颜色
    	
    自动换行
    	p {word-wrap:break-word;}//仅对一个英文单词过长没换行溢出的情况
    

      

  • 相关阅读:
    [HNOI2008]神奇的国度(最大势算法)
    学习笔记——prufer序列
    [NOIP模拟题]chess(最短路计数)
    2019暑假图论总结
    [NOIP2016]天天爱跑步(桶)
    [NOIP2012]疫情控制(贪心)
    [NOIP2016]蚯蚓(单调性乱搞)
    暑假考试题4:星际旅行(欧拉路)
    暑假考试题3:jigsaw 黄金拼图(乱搞)
    暑假考试题3:baritone 上低音号与星星(链表+矩形统计)
  • 原文地址:https://www.cnblogs.com/xuanjian-91/p/10986806.html
Copyright © 2011-2022 走看看