Web前端学习教程之CSS基础知识

IC黑马程序员【黑马程序员】Web前端学习教程之CSS基础知识Web前端入门教程Web前端html+css+JavaScrip视频网盘：/course/267.htmV1912sxkqq资料网盘：https:〃/s/1pMPNzFP提取码：557zH5+CSS3视频视频网盘：/course/197.html71912sxkqq资料网盘：/s/1bqgl6Ej提取码：uf7c记忆力有限，很多知识都只能通过不断的复习笔记和实际操作来加深记忆，分享一些css的基础知识。1、CSS作用以及初识Css的作用：CascadingStyleSheets,简称层叠样式表，主要是用来进行页面的版面布局和外观样式的美化；使用css的原理：能够将结构html和样式css分离书写，简化代码，提高可阅读性;2、css引入方式行内样式、内嵌样式（内联样式）、外部链接样式（外联样式）行内式书写：直接在标签的开始标签身上添加一个style=""属性，然后在引号里面书写css属性和属性值即可，没有实现结构和样式分离，尽量不用：内部样式（内嵌式）：书写在head标签里面，title标签下面，以一对style标签包裹，实现了结构和样式的半分离/Css样式书写格式：选择器{属性1：属性值1；属性2:属性值2;属性3:属性值3；……}选择器：指定。，，样式作用的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里面直接以空格隔开直接书写另一个类名称即可；例如：＜divclass=“redfont100"＞一^元素调用多个类名＜/div＞id选择器id选择器使用有一个过程：01定义：在css里面用"#"+id名称+{css键值对}进行样式定义；02调用：在html里面哪个标签需要，就在开始标签敲空格id二“id名称"进行调用；id选择器的命名规则：不能用纯数字、不能数字开头的、不能中文命名，建议不要用特殊符号；可以用英文单词或者拼音命名，可以以数字结束类选择器和id选择器的区别：类选择可以重复使用，只要样式一致就可以重复的使用同一个类名称；id选择器是唯一的不能重复使用，一个id名称一个页面只能出现一次；理解为：类选择器可以多次使用，一个id名称只能在一个页面只用一次；前期的样式搭建都用类选择器，后期的数据调用都用id；通配符选择器*一个*表示选中所有标签，匹配页面的所有标签，降低页面得到响应时间，不建议使用；实际工作中用的最多的是下面的代码*{margin:0;padding:0;}4、css文字控制属性文字大小font-sizefont-size文字大小，常用的单位是px像素，一般是有默认的字体大小16px，但是我们建议大家一开始就在body中设置一个默认大小；文字字体设置font-familyfont-family取值可以取一个或者多个，如果取多个值要用英文的逗号隔开，表示先找第，个字体如果没有就往后面查找，依次类推;如果是汉语的文字或英文单词之间有空格，都要要用英文状态的引号引起来；font-family:Arial,"MicrosoftYahe”，"微软雅黑"；文字的粗细设置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、直接写英文单词yellowred等等b、16进制表示#aabbcc或者#abcc、rgb()如rgb(0，0，0)dsrgba(),如rgba(0,0,0,0.5)a为透明度常用测试颜色16进制：黑色系列：#000；#333；#666；#9999；灰色系列：#ccc；#eee；#ddd；#dedede；红色：#f00；

黑马程序员黑马程序员文字居中设置text-aligntext-align有三个取值left、center、right,text-align只控制盒子里面的内容的对齐;文本居中：text-align:center;文本的行高设置line-heightline-height取值为数字，可以设置文字行与行之间的距离；line-height:30px;表示行高30px文本的首行缩进text-indenttext-indent首航缩进，取值为具体的像素值或者直接em，1em等于一个字的大小；文本装饰线条修饰text-decorationtext-decoration:none;没有线text-decoration:underline；下划线text-decoration:line-through;中划线/删除线text-decoration:overline;上划线注意：实际工作中我们用的最多的是没有线text-decoration:none;，主要是给超链接a标签去除默认的下划线；一般放在css的最前面将页面所有a的样式都去除；5,字体综合写法font：是否倾斜是否加粗文字大小/行高字体；font:font-stylefont-weightfont-size/line-heightfont-family;注意：01、使用font的综合书写的时候一定要按照顺序书写，属性之间用空格隔开，如果没有的属性可以省略不写，文字大小和字体是必须要书写的；02、实际工作中一般只用：font:文字大小字体;6、Emmet语法标签名+tab键可以生成整个标签；例如：div表示生成div标签；标签*数字+tab键可以按照数字生成对应的个数标签；例如：p*3表示3生成3个p；如果是父子级关系可以直接用〉连接+tab:例如：div>p表示div嵌套？标签；如果是兄弟关系就直接用+加tab；例如：div+p表示div和p标签是同级元素；如果要写类名和id名称直接早标签后面跟.和