前端学习（CSS）

CSS

• CSS英文全称: Cascading Style Sheets）层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用）或XMIL(标准通用标记语言的一个子集)等文件样式的计算机语言。
• CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

CSS是用来美化网页用的，没有网页则CSS毫无用处，所以CSS需要依赖HTML展示其功能。

基础语法

• 格式：

  • 选择器 {
    属性：属性值；
    }

• 注意

  1. css声明要以分号结尾,声明要用{}括起来
  2. 建议一行写一个声明
  3. 如果属性值由多个单词组成，要给值加上引号
     

• 注释

  • /注释内容/

1. 行列式

   • 行内样式将样式定义在具体html元素的style属性中。以行内式写的CSS耦合度高，只适用于当前元素，在计定某个元素的样式时比较常用。
   • 在当前元素使用style 属性的声明方式。
     • style是行内样式属性;
     • color是颜色属性;red是颜色属性值;
     • font-size是字体大小属性;50px是字体大小属性值
       

2. 嵌入式

   • 嵌入式通过在html页面内容开辟一段属于css的代码区域，通常做法为在< head>标签中嵌套

3. 引入外联样式文件
   • 在实际开发当中，很多时候都使用引入外联样式文件，这种形式可以使html页面更加清晰，而且可以达到更好的重用效果。
     
   • rel: 当前文件与引入的文件之间的关系
   • type: 类型,css类型
   • href: 引入外部资源路径

CSS的优先级:就近原则

基本选择器

选择器优先级（权重值）：id选择器100>类选择器10>元素选择器1>通用选择器

组合选择器

• CSS组合选择器说明了两个选择器直接的关系。CSS组合选择符包括各种简单选择符的组合方式。

• 在CSS中包含了四种组合方式:后代选取器(以空格分隔)，子元素选择器(以大于号分隔)，相邻兄弟选择器(以加号分隔)，普通兄弟选择器(以波浪线分隔)。
  

  后代选择器（派生选择器)

  • 用于选择指定标签元素下的后辈元素，以空格分隔

  CSS常用属性

  背景

  1. background-color 背景颜色
  2. background-image :url(img/img.jsp) 背景图片
  3. background-repeat 设置图片是否重复
     • norepeat 不重复
     • repeat-x 横向重复
     • repeat-y 纵向重复
     • repeat 横纵都重复
  4. background-size 设置背景的大小

  文本

  1. color 颜色
  2. text-align 位置
     • center 居中
     • left 左对齐（默认）
     • right 右对齐
  3. text-decoration 文本修饰
     • overline 上划线
     • underline 下划线
     • line-through 中划线

字体

1. font-family 文本字体，该属性设置文本的字体。

• 当font-family的属性值包含空格或特殊字符时，需要将font-family属性值用引号括起来
• font-family有"后备"机制，可以为元素设置多种字体，当浏览器不识别第一种字体时，会尝试找下一个
• 当font-family的属性值有多个时，使用逗号隔开。

2. font-size 文本大小
3. font-style 字体风格

        - normal              正常字体
        - italic                  斜体
        - oblique             斜体（强制倾斜）

4. font-weight 设置字体粗细
   - bold 粗细（100~999值越大，字越粗）400正常，700加粗

块级元素：

• 可以设置元素的宽高和边距，元素会自动换行

行内元素：

• 不可以设置元素的宽高和边距，元素不会自动换行

行内块级元素：

• 可以设置元素的宽高和边距，元素不会自动换行

display属性:规定元素生成框的类型

	1. block          元素会被显示，且元素会变成块级元素，元素前后会有换行符
    2. none           元素会被隐藏
    3. inline         元素会被显示为行内元素，元素前后没有换行符
    4. inline-block   行内块级元素

浮动:float的属性值有none、left、right

1. 只有横向浮动，并没有纵向浮动。
2. 会将元素的display属性变更为block。
3. 浮动元素的后一个元素会围绕着浮动元素(典型运用是文字围绕图片)
4. 浮动元素的前一个元素不会受到任何影响(如果你想让两个块状元素并排显示，必须让两个块状元素都应用float)

盒子模型

- border、padding、margin三个属性构成了盒子模型。

1. border:设置属性的边框
   - 可同时设置边框的宽度、样式、颜色
   
   - 使用border-width、border-style、border-color单独设置
   - 设置属性值的顺序:上右下左
   1. 设置一个属性,表示边框四边效果一致
   2. 设置两个属性,表示上下一致，左右一致
   3. 设置三个属性,表示上、右、下不一致，左右一致

• border-collapse
  1. 设置是否将表格边框折叠为单一边框。
  2. 属性值: separate(默认，单元格边框独立)、collapse(单元格边框合并
  

padding:设置元素所有内边距的宽度，或者设置各边上内边距的宽度。

• 设置属性值的顺序:上右下左
  1. 设置一个属性,表示边框四边效果一致
  2. 设置两个属性,表示上下一致，左右一致
  3. 设置三个属性,表示上、右、下不一致，左右一致
• 如果在表的内容中控制文本到边框的内边距，使用td和th元素的填充属性:
  
• 单独设置各边的内边距: padding-top、padding-left、padding-bottom、padding-right

默认按照上右下左的顺序设定

margin:设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

• 单独设置各边的外边距: margin-top、margin-left、margin-bottom、margin-right
  • auto:自动，可以理解为居中的意思。浏览器自动计算外边距。
  • margin: auto auto:第一个auto表示上下外边距自动计算，第二个auto表示左右外边距自动计算。但是上下外边距在自动计算时不会生效，而左右外边距会生效，表现为居中状态，效果如下

样式的集成

• 我们为一个元素设置的样式同时也会应用到他的后代元素上
• 继承是发生在祖先和后代之间
• 继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式统一的设置到共同的祖先元素上
• 这样只需设置一次即可让所有的元素都具有该样式。
• 注意：并不是所有的样式都会被继承
• 比如背景相关的，布局相关的等这类的样式不会被继承