【有道云笔记】十四 3.30 CSS
https://note.youdao.com/s/3VormGXs
一、CSS定义和基本选择器
CSS定义：cascading style sheet 层叠样式表。
语法：
选择器 {
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
属性名4:属性值4;
}
CSS使用：
1、通过选择器选择上标签
2、在选择的标签上设置样式
选择器分类：
标签选择器： p{}
类选择器： .className{}
id选择器： #id{}
一些常见的样式：
color:red; 文字颜色
font-size:40px;
background-color:blue;
text-decoration:underline;
text-decoration:none; //去掉下划线
二、CSS使用思想
一共有三种样式：50px字体、红色、下划线
正确的思路，就是用所谓"公共类"的思路，就是我们类就是提供"公共服务"，比如有红、大、线，一旦携带这个类名，就有相应的样式变化。
总结：
1） 不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。
2） 每一个类要尽可能小，有"公共"的概念，能够让更多的标签使用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .big-font{ font-size: 50px; } .red{ color: red; } .underline{ text-decoration: underline; } </style> </head> <body> <p class="red big-font">段落1</p> <p class="red underline">段落2</p> <p class="big-font underline">段落3</p> <p class="big-font red underline">段落4</p> </body> </html>
三、CSS高级选择器
s1 s2 后代选择器
s1,s2 并集选择器(选择器组) ||
属性选择器
s1s2 交集选择器（既满足选择器1也满足选择器2） &&
s1>s2 直接儿子选择器，和后代选择器不一样
s1+s2 下一个兄弟选择器,后面紧挨着的第一个兄弟
四、盒模型
盒子中主要的属性就5个：width、height、padding、border、margin。
padding:内边距 margin：外边距
盒模型的示意图：
div+css
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 100px; height: 100px; background-color: blue; margin: 2px; border: 2px solid red; padding: 4px; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>
五、BootStrap
什么是Bootstrap？
简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
-
框架：库 lib library
-
Bootstrap 让我们的 Web 开发更简单，更快捷；
-
注意是 Bootstrap 不是 BootStrap！这是一个词，不是合成词，其含义为：n. 引导指令,引导程序
-
Bootstrap 是当下最流行的前端框架（界面工具集）；
-
特点就是灵活简洁，代码优雅，美观大方；
-
其目的是为了让 Web 开发更敏捷；
-
是 Twitter 公司的两名前端工程师 Mark Otto 和 Jacob Thornton 在 2011 - 年发起的，并利用业余时间完成第一个版本的开发；
传统前端开发中问题：
1、重复、复杂、无意义的命名
2、结构冗余、页面错乱
Bootstrap全局样式特点：
1、代码简洁
2、风格统一
3、美观易用
Bootstrap提供了大量的全局样式，在基本的html标签上通过添加class设置
样式得到增强的效果。