前端笔记css

CSS：美化样式 Cascading Style Sheets
按照css的书写位置分为3类：
行内样式表（内联样式）：将属性写在标签的style属性中，

青春

内部样式表：将style标签写在head标签中，包括选择器，选择器{属性：值；}，对标签进行添加选择器，进行筛选。

外部样式表：将style标签写在一个css文件中,便于维护

color: red; }

html中：

选择器 {属性：值；属性：值；}
选择器就是用来用选择标签的。
css基础选择器：
标签选择器（元素选择器）：标签选择器是指用HTML标签名作为选择器，按标签名称分类，为页面中某一类标签指定统一的css样式。基本如法如下：
标签名{属性1：属性值1；属性2：属性值2；}或者元素名{属性1：属性值1；属性2：属性值2；}
最大的优点是：快速为页面中同类型的标签统一样式，同时这也是缺点，不能设计差异化样式。
（1）标签选择器

标签选择器其实就是我们经常说的html代码中的标签。例如html、span、p、div、a、img等等；比如我们想要设置网页中的p标签内一段文字的字体和颜色。

类选择器：.class {
color:blue;
}

hello

span标签http://www.w3school.com.cn/tags/tag_span.asp
选择器不建议使用下划线，因为js使用下划线的地方较多

导航栏

多类名选择器：将多个类的第一个的字体变大，该使用多类名选择器。
一个div标签中只可以有一个class属性

你好

注意：样式显示效果跟html元素中的类名先后顺序没有关系，受css样式书写的上下顺序有关 各个类名中间用空格隔开 id选择器：  类选择器，可以多次重复使用，但是id选择器不可重复使用，只可以使用一次，所以类选择器与id选择器的区别在于使用的次数。类选择器使用较多，类选择器使用在js方向。

通配符选择器：（开发使用的很少）

你好

哈哈

标签的机制就是盒子。
姑姑额默认字体大小为16号字
css的样式属性：
字号大小：font-size，单位：px（像素），em，in等
font-family：字体，先使用第一个，第一个不可使用就找第二个，如果都没有，就使用默认的字体。
font-weight:bold;/700；（没有单位，相当于bold）字体加粗
参数：normal，正常字体，相当于400；
font-style：字体风格
参数：normal；正常的字体
italic：斜体
字体连写：是有顺序的；选择器{font:font-style font-weight font-size;}

font-style:normal;/italic;取消倾斜/添加倾斜
font-weight：normal;/bold；加粗

开发者工具：chorm，通过f12进行对前端代码检查；或者右键点击检查；进行检查时，使用左上角的箭头进行检查，做测试html，右侧是css，
每一个属性赋值后都需要加分号；

复合选择器：
后代选择器：代表所有的后代，使用空格

王思聪

王思聪

子代选择器:只代表下一代，使用>进行分割
ui li > a{

			}

并集选择器：,代表和，适合于相同样式的声明，使用场景较多

百度

实际开发：

百度

权重问题：

显示模式：display
块级元素：

-

• 1. 等，一个占一行，默认宽度为100%，可以对其设置高度，宽度，对其等属性，常用于网页布局和网页结构的搭建。
     行内元素：等
     元素都在同一行上，对其设置高与宽都是无效的，但水平方向的padding与margin是可以设置的，垂直方向的无效。
     默认宽度就是他本身内容的宽度，行内元素只可以容纳文本或者其他行内元素，a标签除外，因为a标签比较特殊。
     注意：只有文字才可以组成段落，因此p里面不可以放块级元素，同理这些标签h1-h6，dt，都是文字类块级标签，里面不可以放其他块级标签。
     链接里面不可以再放链接。
     块级元素与行内元素的区别：
     块级元素的特点：总是从新行开始；高度，行高，外边距以及内边距都可以控制。宽度默认是容器的100%；可以容纳其他内联元素和其他块级元素

行内元素的特点：和相邻行内元素在一行上；高度，宽度均不可被设置，但水平方向的padding和margin是可以设置的，垂直方向的无效；默认宽度是他本身的内容的宽度；行内元素只能容纳文本或者其他行内元素。

行内块状元素：在行内元素中有几个特殊的标签，例如,可以对他们设置宽度和对齐属性，所以可以称他们为行内块级元素。
行内块级元素的特点：和相邻的行内元素（行内块状元素）在一行上，但是之间会有空白缝隙，默认宽度是它本身内容的宽度，高度，宽度，外边距，以及内边距都可以控制。

标签显示模式是可以相互转换的。

inline:块级元素转换为行内元素
block：行内元素装换为块级元素
inline-block：行内元素转换为行内快级元素

拿到一个标签，首先设置宽度，高度，颜色
标签就是一个个盒子；

导航栏案例：

注意：选择器与{必须有一个空格
属性名与之后的：不允许包含空格，：与属性之间必须有空格。
（并集选择器）当一个rule包含多个selector时，每个选择器都必须占一行。
（后代选择器）一般不超过三级。
属性定义之后必须以；结尾。
行高的测量：