CSS(1)

最新推荐文章于 2024-11-11 23:45:17 发布

每天一点点~

最新推荐文章于 2024-11-11 23:45:17 发布

阅读量76

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_46163346/article/details/120204142

版权


 1. CSS是层叠样式表（CSS样式表/级联样式表）--也是一种标记语言。----用于设置HTML页面中的文本内容(字体、大小、对齐方式等)\图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。
 2. CSS规则由选择器以及一条或多条声明构成。 
 	/*选择器{样式}*/ 	
 	<head> 		
 		<style>
    		    选择器{ 
    		      属性1: 属性值1;
    		      属性2: 属性值2; 
    		      属性3: 属性值3; 
 （  属性和属性值中间是**:**分开，多个“键值对”之间用**;**隔开）
    		} 		
    		</style> 	
    </head> 
    选择器---用于指定CSS样式的HTML标签。
 3. 书写风格：紧凑；展开（推荐）；使用小写字母书写 
 	空格规范：：后保留一个空格
 	选择器和大括号中间保留空格									  		
 	
 4. 标签选择器（元素选择器）----指用**HTML标签名称**作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
 }	
	标签名{
		属性1:属性值1; 
		属性2:属性值2; 
		属性3:属性值3; 
		...
		}
	优点：快速为网页中同类型的标签统一样式
	缺点：不能设计差异化样式。
 5. 类选择器----差异化选择不同的标签，单独一个或者某几个标签
 }
 	.类名  {   
   		 属性1:属性值1; 
 		 ...  
		}
结构需用**class属性**来调用---<div class='类名'></div>
[口诀：样式点定义，结构类（class）调用，一个或多个，开发最常用]
**注意：**
	-类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)
	-长名称或词组可以使用中横线来为选择器命名。
	-不要纯数字、中文等命名， 尽量使用英文字母来表示。
	-多类名选择器：各个类名中间用空格隔开。
 6. id选择器-----样式用#定义，结构id调用，只调用一次，别人切勿使用。（一般搭配js)
 7. 通配符选择器---用*号表示选择所有的标签。(特殊情况使用）
 8. 字体系列---font-family---设置字体	}
 	p { font-family:"微软雅黑";}
 	指定多个字体，如果浏览器不支持第一个字体就会尝试下一个直到找到合适的字体，如果都没有，以电脑默认字体为准}
 	body{font-family: Arial,"Microsoft Yahei", "微软雅黑";}
 9. 字体大小--font-size			}
	p { 
		font-size:20px; 
	  }
 10. 字体粗细---font-weight--（设置400 等同于 normal，而 700 等同于 bold）不加单位
 11. 文本风格---font-style---设**italic**显示**斜体**样式。
 <em>XXXX</em>也可显示斜体（em,i)	

 12.  字体复合属性---font：--		}
 	选择器 { font: font-style  font-weight  font-size/line-height  font-family;}  
 **注意：**  
 	 不能更换顺序，各个属性用**空格**隔开 
     必须保留font-size和font-family属性。
 13. 文本颜色---color---通过预定义的颜色值、十六进制（使用最多）、RGB代码表示
 14. 对齐文本---text-align---设置**文本内容**的水平对齐方式---left，right、center
 15. 装饰文本---text-decoration---给文本添加**下划线（underline）[常用]**、删除线（line-through）、上划线（overline）、**none（无，最常用）**
 16. 文本缩进---text-indent---首行缩进
	如果写了2em相当缩进当前元素2个字的大小
 17. 行间距---line-height
（上间距--文本高度--下间距）
 18. CSS三种样式表（内部样式表[练习常用]--单独放到<style>标签中；行内样式表--在元素标签内部的style中设置；外部样式表(推荐)--单独写到CSS文件中，使用<link>标签引入<link rel="stylesheet" href="css文件路径">
 19. chrome调试工具--打开调试工具（F12/右击空白处->检查）
 20. emmet语法	}
 快捷生成html标签:div->tab
 				div*3
 				ul>li
 				div+p
 				.demo/#two tab
 				div$*5
 				div{$}*5
  快捷生成CSS标签：w200+tab->width:200px;
  				lh26+tab->line-heigth:26px;
  快速格式化代码：右键格式化（shift+alt+f)/
 	文件-》首选项》设置》搜索emmet.include》在setting.json下的用户中添加“editor.formatOnType”：true， "editor.formatOnSave”：true

 21. 常用复合选择器：
 后代选择器}（元素1 元素2{ 样式声明 }---选择元素1里里面元素2的所有元素）
 子选择器}（元素1 > 元素2{ 样式声明 }、
 **并集选择器**}（元素1 , 元素2 (任何选择器）{ 样式声明 }（一般竖着写）、
 链接伪类选择器--用:表示【按**LVHA**顺序】
	a:link  未访问的链接
	a:visited  已访问的链接
	a:hover  鼠标上的链接
	a:active  选定的链接
	**重点记住**} a{} 和 a:hover  实际开发的写法
（单独制定样式）
 focus伪类选择器---用于选取获得焦点的表单元素}--input：focus{样式}