css基础知识分享【黑马web前端】

更新时间:2019年07月26日 10时54分25秒来源:黑马程序员论坛

记忆力有限，很多知识都只能通过不断的复习笔记和实际操作来加深记忆，分享一些css的基础知识。

1、CSS作用以及初识
Css的作用：
Cascading Style Sheets，简称层叠样式表，主要是用来进行页面的版面布局和外观样式的美化；
使用css的原理：
能够将结构html和样式css分离书写，简化代码，提高可阅读性；
2、css引入方式
行内样式、内嵌样式（内联样式）、外部链接样式（外联样式）
行内式书写：
直接在标签的开始标签身上添加一个 style=“”属性，然后在引号里面书写css属性和属性值即可，没有实现结构和样式分离，尽量不用：
内部样式（内嵌式）：
书写在head标签里面，title标签下面，以一对style标签包裹，实现了结构和样式的半分离；
Css样式书写格式：
选择器 { 属性1:属性值1;  属性2:属性值2; 属性3:属性值3；…… }
选择器：指定CSS样式作用的HTML对象（要更改样式的标签），花括号内是对该对象设置的具体样式。
属性和属性值：以键值对的形式出现，属性和属性值之间用英文的冒号 ’  :  ’ 链接；；
外部链接的步骤：
   01 新建：.css格式的css文件，直接书写选择器以及css样式；
   02 引用：利用link标签引入新建的css文件，要配合link的三个属性  rel关系，type文件类型（可以不写），href文件路径；
使用外部链接的好处：
实现了结构和样式的完全分离，代码简介，可读性强；
Css外部链接样式共享
一个css样式可以共享，如果两个页面的标签样式完全一致，就可以使用同一个css文件，然后分别连接过来即可；
Css引入方式的优缺点
行内样式表：书写方便，权重高。缺点：没有实现样式和结构相分离；
内部样式表：部分结构和样式的分离。缺点：没有彻底分离，半分离状态；
外部样式表：完全实现结构和样式分离，方便各个页面的使用。缺点：需要引入
3、CSS选择器
选择器的作用：选择标签的，把想要选择的元素标签选择出来。
选择器的分类：基础选择器和复合选择器；
基础选择器：
标签选择器、类选择器、id选择器、通配符选择器
标签选择器
以标签名称命名的选择器，可以把将页面中所有的同类元素全部选中；
注意：如果我们选中了改标签，页面中所有的该标签就会被全部选中，所有不建议大家直接使用标签选择器；
类选择
类选择器使用有一个过程：
01 定义：在css里面用点“  .  ” +  类名称 +{ css键值对 } 进行样式定义; 02 调用：在html里面哪个标签需要，就在开始标签敲空格class=“类名称”进行调用；
类选择器的命名规则：
不能用纯数字、不能数字开头的、不能中文命名，建议不要用特殊符号；
可以用英文单词或者拼音命名，可以以数字结束
多类名调用
一个标签身上只能使用一个class，如果想要调用多个类名我们可以在一个class里面直接以空格隔开直接书写另一个类名称即可；
例如：<div class=“red  font100”>一个元素调用多个类名</div>
id选择器
id选择器使用有一个过程：
01 定义：在css里面用 “  #  ” +  id名称 +{ css键值对 } 进行样式定义;
02 调用：在html里面哪个标签需要，就在开始标签敲空格id=“id名称”进行调用；
id选择器的命名规则：
不能用纯数字、不能数字开头的、不能中文命名，建议不要用特殊符号；
可以用英文单词或者拼音命名，可以以数字结束
类选择器和id选择器的区别：
类选择可以重复使用，只要样式一致就可以重复的使用同一个类名称；
id选择器是唯一的不能重复使用，一个id名称一个页面只能出现一次；
理解为：类选择器可以多次使用，一个id名称只能在一个页面只用一次；前期的样式搭建都用类选择器，后期的数据调用都用id；
通配符选择器 *
一个*表示选中所有标签，匹配页面的所有标签，降低页面得到响应时间，不建议使用；
实际工作中用的最多的是下面的代码
*{ margin: 0; padding: 0;  }
4、css文字控制属性
文字大小font-size
font-size文字大小，常用的单位是px像素，一般是有默认的字体大小16px，但是我们建议大家一开始就在body中设置一个默认大小；
文字字体设置font-family
font-family取值可以取一个或者多个，如果取多个值要用英文的逗号隔开，表示先找第一个字体如果没有就往后面查找，依次类推；
如果是汉语的文字或英文单词之间有空格，都要要用英文状态的引号引起来；
font-family:Arial,”Microsoft Yahei”，“微软雅黑”；文字的粗细设置font-weight
加粗：font-weight:bold;    font-weight:700;
不加粗：font-weight:normal; font-weight:400;
文字的倾斜样式控制font-style
倾斜：font-style:italic;
不倾斜：font-style:normal;
注意：实际工作中我们一般会使用font-style:normal;让em和i不倾斜；
字体的颜色控制 color
颜色取值：
a、直接写英文单词yellow red等等
b、16进制表示#aabbcc或者#abc
c、rgb（）如rgb（0，0，0）
d、rgba(),如rgba（0,0,0,0.5）a为透明度

常用测试颜色16进制：
黑色系列：#000； #333；  #666； #9999；
灰色系列：#ccc； #eee； #ddd； #dedede；
红色：#f00；
文字居中设置text-align
text-align有三个取值left、center、right, text-align只控制盒子里面的内容的对齐；
文本居中：text-align:center;
文本的行高设置line-height
line-height取值为数字，可以设置文字行与行之间的距离；
line-height:30px; 表示行高30px
文本的首行缩进 text-indent
text-indent首航缩进，取值为具体的像素值或者直接em，1em等于一个字的大小；
文本装饰线条修饰text-decoration
text-decoration:none; 没有线
text-decoration：underline；下划线
text-decoration:line-through; 中划线/删除线
text-decoration:overline;上划线
注意：实际工作中我们用的最多的是没有线text-decoration:none;，主要是给超链接
a标签去除默认的下划线；一般放在css的最前面将页面所有a的样式都去除；
5、字体综合写法
font：是否倾斜是否加粗文字大小/ 行高字体；
font:  font-style  font-weight font-size/line-height  font-family;
注意:
01、使用font的综合书写的时候一定要按照顺序书写，属性之间用空格隔开，如果没有的属性可以省略不写，文字大小和字体是必须要书写的；
02、实际工作中一般只用：font:文字大小字体；
6、Emmet语法
标签名+tab键可以生成整个标签；例如：div 表示生成div标签；
标签*数字+tab键可以按照数字生成对应的个数标签；例如：p*3表示3生成3个p；
如果是父子级关系可以直接用>连接+tab：例如：div>p 表示div嵌套p标签；
如果是兄弟关系就直接用+加tab；例如：div+p 表示div和p标签是同级元素；
如果要写类名和id名称直接早标签后面跟. 和#即可；例如：div.box  === <div class=“box”></div> div#box  === <div id=“box”></div> ；
如果想要生成有顺序的类名，直接在类名后面加$+数字；
如果想要生成带有内容的盒子，我们只需要在标签或者名称后面添加大括号{}里面写上内容
w50 +tab  生成 width:50px;
h50 +tab  生成 height:50px;

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

上海中心

css基础知识分享【黑马web前端】

相关阅读