1. 首页
  2. IT资讯

css详细学习知识点,初学第一步——干货

“u003Cdivu003Eu003Cp class=”正文”u003Eu003Cstrongu003ECss概念u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cp class=”正文”u003ECSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)u003Cu002Fpu003Eu003Cp class=”正文”u003ECss是用来美化html标签的,相当于页面化妆。u003Cu002Fpu003Eu003Cp class=”正文”u003E◆样式表书写位置u003Cu002Fpu003Eu003Cp class=”正文”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F66b200035544a42eb3a6″ img_width=”363″ img_height=”159″ alt=”css详细学习知识点,初学第一步——干货” inline=”0″u003Eu003Cu002Fpu003Eu003Cp class=”标题_2″u003Eu003Cstrongu003E选择器u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cp class=”标题_3″u003Eu003Cstrongu003E写法u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cp class=”正文”u003E选择器是一个选择谁(标签)的过程。u003Cu002Fpu003Eu003Cp class=”语法格式”u003E选择器{属性:值; 属性:值;}u003Cu002Fpu003Eu003Cp class=”标题_2″u003Eu003Cstrongu003E选择器u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cp class=”标题_3″u003Eu003Cstrongu003E基础选择器u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cp class=”正文”u003E◆标签选择器u003Cu002Fpu003Eu003Cp class=”语法格式”u003E标签{属性:值;}u003Cu002Fpu003Eu003Cp class=”正文”u003E特点:标签选择器定义之后,会将页面所有的元素都执行这个标签样式。u003Cu002Fpu003Eu003Cp class=”正文”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F66b400018ee9dc9fe137″ img_width=”381″ img_height=”404″ alt=”css详细学习知识点,初学第一步——干货” inline=”0″u003Eu003Cu002Fpu003Eu003Cp class=”正文”u003E★颜色的显示方式u003Cu002Fpu003Eu003Cp class=”正文”u003E◎直接写颜色的名称u003Cu002Fpu003Eu003Cp class=”正文”u003E◎十六进制显示颜色u003Cu002Fpu003Eu003Cp class=”正文”u003E0-9 a-fu003Cu002Fpu003Eu003Cp class=”正文”u003E#000000; 前2为代表红色,中间2位代表绿色,后边2位代表蓝色。u003Cu002Fpu003Eu003Cp class=”正文”u003E◎rgbu003Cu002Fpu003Eu003Cp class=”正文”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F66b10003d7b4b3603fa3″ img_width=”306″ img_height=”30″ alt=”css详细学习知识点,初学第一步——干货” inline=”0″u003Eu003Cu002Fpu003Eu003Cp class=”正文”u003E◎rgbau003Cu002Fpu003Eu003Cp class=”正文”u003EA代表alpha 不透明度 值 0-1u003Cu002Fpu003Eu003Cp class=”正文”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F66b10003d7b59d5b6585″ img_width=”395″ img_height=”29″ alt=”css详细学习知识点,初学第一步——干货” inline=”0″u003Eu003Cu002Fpu003Eu003Cp class=”正文”u003E◆类选择器(重点)u003Cu002Fpu003Eu003Cp class=”正文”u003E写法u003Cu002Fpu003Eu003Cp class=”语法格式”u003E.自定义类名{属性:值; 属性:值;}u003Cu002Fpu003Eu003Cp class=”正文”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F66b2000355469f670ba9″ img_width=”427″ img_height=”428″ alt=”css详细学习知识点,初学第一步——干货” inline=”0″u003Eu003Cu002Fpu003Eu003Cp class=”正文”u003E特点: 谁调用,谁生效。u003Cu002Fpu003Eu003Cp class=”正文”u003E一个标签可以调用多个类选择器。u003Cu002Fpu003Eu003Cp class=”正文”u003E多个标签可以调用同一个类选择器。u003Cu002Fpu003Eu003Cp class=”正文”u003E★类选择器命名规则u003Cu002Fpu003Eu003Cp class=”正文”u003E◎不能用纯数字或者数字开头来定义类名u003Cu002Fpu003Eu003Cp class=”正文”u003E◎不能使用特殊符号或者特殊符号开头(_)来定义类名u003Cu002Fpu003Eu003Cp class=”正文”u003E◎不建议使用汉字来定义类名u003Cu002Fpu003Eu003Cp class=”正文”u003E◎不推荐使用属性或者属性的值来定义类名u003Cu002Fpu003Eu003Cp class=”正文”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F66b200035547a5f9d419″ img_width=”253″ img_height=”424″ alt=”css详细学习知识点,初学第一步——干货” inline=”0″u003Eu003Cu002Fpu003Eu003Cp class=”正文”u003E◆ID选择器u003Cu002Fpu003Eu003Cp class=”正文”u003E写法u003Cu002Fpu003Eu003Cp class=”语法格式”u003E#自定义名称{属性:值;}u003Cu002Fpu003Eu003Cp class=”正文”u003E特点: 一个ID选择器在一个页面只能调用一次。如果使用2次或者2次以上,不符合w3c规范,JS调用会出问题。u003Cu002Fpu003Eu003Cp class=”正文”u003E一个标签只能调用一个ID选择器。u003Cu002Fpu003Eu003Cp class=”正文”u003E一个标签可以同时调用类选择器和ID选择器。u003Cu002Fpu003Eu003Cp class=”正文”u003E◆通配符选择器u003Cu002Fpu003Eu003Cp class=”语法格式”u003E*{属性:值;}u003Cu002Fpu003Eu003Cp class=”正文”u003E特点:给所有的标签都使用相同的样式。u003Cu002Fpu003Eu003Cp class=”正文”u003E★不推荐使用,增加浏览器和服务器负担。u003Cu002Fpu003Eu003Cp class=”标题_3″u003Eu003Cstrongu003E复合选择器u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cp class=”正文”u003E概念:两个或者两个以上的基础选择器通过不同的方式连接在一起。u003Cu002Fpu003Eu003Cp class=”正文”u003E◆交集选择器u003Cu002Fpu003Eu003Cp class=”语法格式”u003E标签+类(ID)选择器{属性:值;}u003Cu002Fpu003Eu003Cp class=”正文”u003E特点:即要满足使用了某个标签,还要满足使用了类(id)选择器。u003Cu002Fpu003Eu003Cp class=”正文”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F66b400018eed651b49fa” img_width=”449″ img_height=”488″ alt=”css详细学习知识点,初学第一步——干货” inline=”0″u003Eu003Cu002Fpu003Eu003Cp class=”正文”u003E◆后代选择器(重点)u003Cu002Fpu003Eu003Cp class=”语法格式”u003E选择器+空格+选择器{属性:值;}u003Cu002Fpu003Eu003Cp class=”正文”u003E后代选择器首选要满足包含(嵌套)关系。u003Cu002Fpu003Eu003Cp class=”正文”u003E父集元素在前边,子集元素在后边。u003Cu002Fpu003Eu003Cp class=”正文”u003E特点:无限制隔代。u003Cu002Fpu003Eu003Cp class=”正文”u003E只要能代表标签,标签、类选择器、ID选择器自由组合。u003Cu002Fpu003Eu003Cp class=”正文”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F66b300028bb6d8bc404c” img_width=”583″ img_height=”507″ alt=”css详细学习知识点,初学第一步——干货” inline=”0″u003Eu003Cu002Fpu003Eu003Cp class=”正文”u003E◆子代选择器u003Cu002Fpu003Eu003Cp class=”语法格式”u003E选择器>选择器{属性:值;}u003Cu002Fpu003Eu003Cp class=”正文”u003E选中直接下一代元素。u003Cu002Fpu003Eu003Cp class=”正文”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002F66b000040351b60b8dfc” img_width=”490″ img_height=”445″ alt=”css详细学习知识点,初学第一步——干货” inline=”0″u003Eu003Cu002Fpu003Eu003Cp class=”正文”u003E◆并集选择器u003Cu002Fpu003Eu003Cp class=”语法格式”u003E选择器+,+选择器+,选择器{属性:值;}u003Cu002Fpu003Eu003Cp class=”正文”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F66b400018eeea003e21b” img_width=”447″ img_height=”320″ alt=”css详细学习知识点,初学第一步——干货” inline=”0″u003Eu003Cu002Fpu003Eu003Cp class=”标题_2″u003Eu003Cstrongu003E文本元素u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cp class=”标题_3″u003Eu003Cstrongu003E 属性u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cp class=”正文”u003Efont-size:16px; 文字大小u003Cu002Fpu003Eu003Cp class=”正文”u003EFont-weight: 700; 值从100-900,文字粗细,不推荐使用font-weight:bold;u003Cu002Fpu003Eu003Cp class=”正文”u003EFont-family:微软雅黑; 文本的字体u003Cu002Fpu003Eu003Cp class=”正文”u003EFont-style: normal | italic; normal 默认值 italic 斜体u003Cu002Fpu003Eu003Cp class=”正文”u003Eline-height: 行高u003Cu002Fpu003Eu003Cp class=”正文”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F66b400018ef0f7d12954″ img_width=”341″ img_height=”186″ alt=”css详细学习知识点,初学第一步——干货” inline=”0″u003Eu003Cu002Fpu003Eu003Cp class=”标题_3″u003Eu003Cstrongu003E文本属性连写u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cp class=”语法格式”u003Efont: font-style font-weight font-sizeu002Fline-height font-family;u003Cu002Fpu003Eu003Cp class=”正文”u003E◆:注意:font:后边写属性的值。一定按照书写顺序。u003Cu002Fpu003Eu003Cp class=”正文”u003E文本属性连写文字大小和字体为必写项。u003Cu002Fpu003Eu003Cp class=”语法格式”u003EFont:italic 700 16pxu002F40px 微软雅黑;u003Cu002Fpu003Eu003Cp class=”正文”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F66b20003554850961708″ img_width=”495″ img_height=”54″ alt=”css详细学习知识点,初学第一步——干货” inline=”0″u003Eu003Cu002Fpu003Eu003Cp class=”标题_3″u003Eu003Cstrongu003E文字的表达方式u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cp class=”正文”u003E◆直接写中文名称。u003Cu002Fpu003Eu003Cp class=”正文”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F66af00041890dbff355b” img_width=”347″ img_height=”99″ alt=”css详细学习知识点,初学第一步——干货” inline=”0″u003Eu003Cu002Fpu003Eu003Cp class=”正文”u003E◆写字体的英文名称。u003Cu002Fpu003Eu003Cp class=”正文”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F66b500017f2290aaf3c0″ img_width=”479″ img_height=”92″ alt=”css详细学习知识点,初学第一步——干货” inline=”0″u003Eu003Cu002Fpu003Eu003Cp class=”正文”u003E◆unicode 编码u003Cu002Fpu003Eu003Cp class=”正文”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F66b300028bb88212bc1e” img_width=”387″ img_height=”391″ alt=”css详细学习知识点,初学第一步——干货” inline=”0″u003Eu003Cu002Fpu003Eu003Cp class=”正文”u003E找到字体的编码小技巧:u003Cu002Fpu003Eu003Cp class=”正文”u003E打开浏览器u003Cu002Fpu003Eu003Cp class=”正文”u003E第一步:按f12u003Cu002Fpu003Eu003Cp class=”正文”u003E第二步:找到consoleu003Cu002Fpu003Eu003Cp class=”正文”u003E第三步:输入escape(“宋体”) 注意英文的括号和双引号。然后回车就OK了u003Cu002Fpu003Eu003Cp class=”正文”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F66b500017f28556588ce” img_width=”477″ img_height=”361″ alt=”css详细学习知识点,初学第一步——干货” inline=”0″u003Eu003Cu002Fpu003Eu003Cp class=”正文”u003E想系统学习的私信小编【系统学习】。小编带你飞u003Cbru003Eu003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:css详细学习知识点,初学第一步——干货

主题测试文章,只做测试使用。发布者:℅傍ㄖ免沦陷dε鬼,转转请注明出处:http://www.cxybcw.com/11388.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code