html笔记

CSS层叠样式表

1、层叠：一种属性

2、样式表：

6、使用

  6.1内联样式(标签级)：在html标签中使用style属性

  6.2内部样式表页面级：在head区域使用style元素来包含CSS

  6.3外部引用（企业专用）：外部后缀为CSS的文件，使用link来进行引用

  6.4Css基本使用：标签名{css属性：值;}

7、Css属性

7.1 width：设置某个html标签的宽度

7.2height：设置某个html标签的高度

7.3 background-image:url("图片地址")，设置html标签的背景图。

7.4 margin：0；设置html标签之间的空隙为0，一般对body设置

margin: 0 auto;/*可以让html标签水平居中*/

      margin: 0 auto;只对表格有效，因为是相对于窗口的位置

7.5text-align: center;/*可以让html标签内容对齐方式，一般用于包含具体内容的标签*/

7.6 font-size：文本大小最低10px

7.7  font-family：设置字体类型  color设置文本颜色

7.8 border：设置标签边框，一共三个值：大小，边框式，颜色。

7.9 border-spacing：代替cellspaceing。以像素为单位

7.10 background-color

back-ground-size: 背景图图片在盒子里的显示方式，cover拉伸，repeat平铺

7.11 text-decoration：none；去掉下划线   underline（下划线）

7.12 border-radius：10px   10px的圆角

该属性可单独对每条边设置圆角，从左上角顺时针设置圆角

    例 border-radius：10px 10px 0xp 0xp

7.13 vertical-align：处理图片或者表单标签的垂直对齐方式，middle、right、left

 

8、注释

8.1 对代码的说明

8.2 为什么要写

8.3 怎么写/**/

8.4 无位置要求

9、Css选择器

9.1 目的：能够实现对部分html标签设置不同的样式

9.2 定义：利用不同的特殊符号加上html属性值来达到选择元素的目的。

9.3 分类

id用于标记唯一样式，只使用一次。

9.3.1 id

使用结合html元素的id属性来选择元素

规范：#id属性值{CSS代码}

作用：对设置id属性的元素设置样式

注意：一个页面不能出一样的id属性，只对一个元素有效果

使用场景：样式比较特殊的html标签 。

9.3.2 class

使用：结合html元素的class属性来选择元素。

规范：  .class属性值{CSS代码}

作用：能够对页面上拥有 同样class属性值的一个或多个元素设置样式。

范围：class属性每个html标签都可以使用。

使用场景：

9.3.3 标签

9.3.4 组合

目的：减少不必要的class属性或者id属性

使用：同事在一个选择器内同事使用id选择器、class选择器、标签选择器、伪类选择        器的两个或多个。

作用：能够更精确的选择到html标签并修改样式

规范：css选择器 css选择器{css代码}

9.3.5 伪类

目的：当用户鼠标发生某种行为时对html标签

分类：a：link；a:hover；a:visited；a:active

a:link：打开页面时超链接默认的样式。

a:visited：当超链接被点击之后使用的样式。

a:hover：当鼠标悬停到超链接时，使用的样式

a:active：当鼠标点击不放的时候，使用的样式

hover不仅仅运用于超链接，大多数html标签都可以使用。

9.4 属性值命名规范：尽可能让命名有意义。使用单词，非中文及全拼。

里面可以包含英文字母-数字，以字母开头。

10、层叠

10.1 当CSS有多个选择器同时对一个HTML标签的统一属性进行修改时，会引发层叠特性。

10.2 定义：是作用于CSS选择器的一套完善的优先级规则

    10.3规则：没有使用组合选择器：优先级：id>class>标签>伪类

      10.4 使用了组合选择器

               如果谁有id选择器，那么就用谁的。如果都有id选择器，哪边有额外的选择器就用谁的。

 

1.使用表格布局：不兼容移动端，不会跟浏览器的宽度变化而调整。

2.响应式布局：可以随浏览器窗口宽度的变化而进行页面布局调整。具有一定的灵活性，改善用户体验，用于替代表格布局。

3.响应式布局的核心实现，标签div-div核心是盒模型以及div浮动模型

1.div

定义：一个mtml标签

特性：1.1独占一行。没有width、height等常用的html属性、可以使用CSS设置样式。

1.2浮动特性可以让多个div显示在一行

1.2.1定义：指的是一个css属性：float

1.2.2 使用   float：left；   float：right；

1.2.3 浮动元素只会和浮动元素显示在一行

2、让几个浮动元素水平居中于页面。

3、div内容的水平垂直居中。

水平：text-align：center

垂直：1、line-heigh：的高度，针对一行内容或文字。

2、针对多行内容或文字：

①把里面的内容放入一个小的div当中，然后对小的div设置margin-top来模拟居中 效果。

5.css盒模型

5.1 定义：盒模型布局是一规范。

5.2 作用将页面上的html标签都看成盒子，每个盒子都可以设置相应的css盒模型属性，包括width、height、margin、padding、border。利用这些属性来设置盒子的大小和位置，从而达到布局的效果。

5.3 可以设置css盒模型的html标签：

①块级元素：独占一行html标签，即块级元素。div，p，h1~h6，body

5.3 其他元素

①行内元素：可以一行显示多个的html标签。a，img，font，span

5.5标准盒模型

①一个块级元素由五个部分组成，由内到外为：1、width/height-->padding(可无)-->border（可无》-->margin（可无）

②padding处理盒子内容跟边框之间的距离。

③margin：处理盒子（块级元素）与盒子之间的空隙

css定位：

1、背景：很多网页上特殊的部分需要更好的布局，借助CSS盒模型并不能很好的处理。在CSS盒模型上加上额外的定位知识去处理。

2、本质：是指一个CSS属性：position

①fixed

a。设置了fixed的盒子（块级元素）位置会固定在屏幕上。可以通过设置、left、top、bottom、right来设置其在屏幕中的位置。

②absolute：和fix一样，不过没有固定在窗口上

④relative：a。不脱离文档流，向队员原来的位置进行偏移。使用top、left、right、bottom来设置盒子的偏移量。

b。在不影响其他标签的情况下改变自己的位置。

③static（默认）

3、四个位置属性

3.1特点：只有设置了position属性的HTML标签才可以使用这四个Css属性

四个属性一般左右一个，上下一个即可定位盒子位置。

3.2 left：盒子距离左边有一定的空隙，以像素为单位。right、top、bottom同理

4、文档流：html标签的默认展示方式

4.1 当一个盒子使用了固定定位或者绝对定位之后，会脱离文档流，表现的像浮起来了一样，其他没有使用定位的盒子，会沉于原来盒子的下方。

5.css定位实现垂直居中，自身设置position，设置top为50%，但这个事自身顶部距离屏幕顶部为50%，所以需要设置自身的margin-top为负的自身高度的一半，来达到真真的垂直居中。水平居中同理可得。。。

5、如果定位html标签水平锤子居中，设置left、right、bottom、top为0，并且加上marin：auto；

rgba：css颜色的宁一种写法

1、rgba+rgb+alpha（透明度）

2、rgb：采用三原色以及对应的饱和度来达到产生不同的烟丝

3、三原色;红、绿、蓝：饱和度0-255