CSS详细教程_css教程

html的属性只对当前标签有效，没有可重用性，导致没有可维护性

css 具备一定的代码重用性，提高了可维护性

   但是css没有把重用性做到极致。使用scss可以做到极致

W3C建议使用css替代html属性，

    如果css无法替代的属性，就使用html属性就可以了

样式声明 ：每个样式属性之间用分号连接

样式属性：值

color:red;  字体颜色

background-color:yellow; 背景颜色

font-size: 50px;  字号大小

在单元素中，写style属性，在style属性中编写样式

<元素 style="样式声明;样式声明....."></元素>

<p style="color:red;background-color:yellow;font-size: 50px;">

只对当前元素生效，代码不能重用

内联样式默认优先级最高

内联样式只在学习和测试中使用，项目基本不用

在head标签中，编写style标签，在style标签内部，编写属性

选择器{样式声明;样式声明.....}

选择器：定义页面中使用这个样式的元素条件

p{

color:purple;

background-color: pink;

}

只能在当前页面中使用，项目中使用较少，一般是在整体样式写完，在内部样式查缺补漏

学习和测试使用较多

创建一个.css文件，在html中的head标签里，使用link引入

<link rel="stylesheet" href="my.css"/>

必须有rel="stylesheet"，代表当前文件和引入文件的关系

项目中大量使用

我们只关注文本样式的继承，

后代元素可以使用父元素的文本样式

文本样式和字体样式的继承

绝大多数文本字体样式，可以被继承

a标签不会继承字体颜色

为一个标签定义多个样式规则

如果样式属性不冲突，都会作用到这个标签上

默认优先级

高   内联样式

中  内部样式，外部样式-------就近原则（代码执行顺序）

低  浏览器默认样式

f12关于优先级的显示

默认情况下，浏览器中f12中 样式是按照默认优先级顺序从高往低显示

!important，设置最高优先级，比内联都高

写在某一个值与分号之间，!important与值之间有空格

color: red !important;

注意，内联样式不允许设置!important，语义要求

03_ex.html

一个p#p1标签，内容假文

使用id选择器设置 文本颜色red,背景颜色yellow

使用元素选择器设置 文本颜色blue，字号大小40px

使用通用选择器设置 文本颜色orange 背景颜色pink，字号大小100px

选择器权值的问题

使用.定义样式，哪个元素想用，用class都能调用

-----------------------------------

. 类名{样式声明}

----------------------------------

类选择器的其它用法：

1.多类选择器

<元素 class="类名1  类名2  类名3.......">

2.分类选择器，更精准匹配到目标元素

  . 类名1.类名2（样式声明）  匹配到的是同时引用了类1和类2的元素

 元素选择器.类选择器{样式声明}

  .类选择器.类选择器{样式声明}

.tooltip.show{}

3.类名的定义规范  .类名（样式声明）

  必须有 .

  不能以数字开头

  只能包含字母，数字  - 或者_

  不能使用关键字

  尽量见名知意

选择器1,选择器2,选择器3.....{样式声明}

#d1,.c1,div,p.c2{color:red;background-color:yellow}

相当于：

   选择器1{样式声明}

   选择器2{样式声明}

   选择器3{样式声明}

(空格)通过元素的后代关系，来匹配元素

后代关系：一级或者多级的嵌套

选择器1  选择器2  选择器3{样式声明}

>通过元素子代关系来匹配元素

子代关系，一层嵌套为子代

选择器1>选择器2>选择器3{样式声明}

子代和后代选择器可以混合使用

#d1>p span{color:red;}

匹配元素在某一个状态时的样式

（1）只适用于a标签的伪类有2种：

  ①匹配超连接未被访问时的整体 :link

     a:link{color:red}

  ②匹配超链接已被访问时的状态 :visited

     a:visited{color:green}

（2）所有元素都能用的伪类

    :hover 鼠标悬停的状态

    :active 激活状态:鼠标按住不放的瞬间才是Active状态

    :focus 元素获取焦点时的状态（input button）a:focus{font-size:36px;color:orange}

练习：04_ex.html

一个a标签，设置以下样式

1.访问后，文本颜色orange

2.被激活时，文本颜色green

3.鼠标悬停时，文本颜色red

4.未被访问时，文本pink

当:link :visited:hover:active同时作用在一个a标签上时

需要按照顺序去编写，不然会有状态显示不出样式的情况

lv & ha 爱恨原则

:link:visited:hover :active

width:

height:

取值：1.px为单位的数字，rem

      2.%  但是如果设置高度，当前元素的父元素是body，%失效

min-width

max-width：100%,设置给图片

一般设置最大最小宽高，width都是相对单位（值会改变）

min-height

max-height

1.px 像素

2.in  英寸 1in=2.54cm

3.pt  磅值,用于修饰字号大小  1pt=1/72 in

4.cm 厘米

5.mm 毫米

6.em  以父元素设置的尺寸为标准单位，2em是父元素的2倍

7.rem  1rem为当前页面html设置的尺寸的1倍

默认情况下，html设置的值为16px

面试题 em和rem的区别

em以父元素设置的数值为一个基本单位

rem以html设置的数值为一个基本单位

8.% 父元素的%

块级元素

行内元素

行内块(input/button)

设置尺寸有效

设置尺寸无效

设置尺寸有效

默认宽，父元素100%

默认高，靠内容撑开

没有内容就是0

宽高靠内容撑开

浏览器默认设置一个宽高

不同浏览器给的宽高不同。

一般要写兼容，css reset

父元素容器尺寸小，内容大，会出现溢出效果

默认情况下，溢出是纵向溢出

溢出的控制，要把css属性写给小尺寸的父元素

(1)overflow: visible;  溢出部分显示，默认值

            hidden  溢出部分隐藏

            scroll   带滚动条，不管是否溢出，横线都添加x/y轴的滚动条

            auto  自动，不溢出就没有滚动条，溢出自动在溢出方向添加滚动条

overflow-x:scroll  单独让x轴出现滚动条

overflow-y:scroll  单独让y轴出现滚动条

溢出的注意事项

溢出的底层原理特别复杂，

①溢出可以解决很多css的特殊情况---用溢出都不是最优解决方案

②横向溢出怎么写

1.颜色的英文单词 red  yellow

2.#开头，6个16进制组成一个颜色#ff0000  #00ff00 #0000ff

   #ffffff  #000000  #666666

#00      00        00

 ➷  ➷   ➷

      red       green   blue-------rgb

3.当#aabbcc可以简写成#abc

 #f00 #0f0 #00f   #000  #fff  #ff0  #0ff   #f0f  #666  #999

4.rgb(r,g,b)十进制取值 每个颜色的取值范围0~255，共256种颜色

  rgb(255,0,0)红色

5.rgba(r,g,b,alpha)   alpha透明度0~1

rgba(r,g,b,0.2)= rgba(r,g,b,.2)

 纯透明 rgba(r,g,b,0)transparent

同时设置4个方向的边框

border:width  style  color;

width--边框的粗细

style---边框样式 solid 实线

                double   双实线

                dotted  小圆点虚线

                dashed  短线虚线 

color---合法颜色，transparent

取消边框 border:none/0;

最简方式 border：style;  border:solid;

边框的其他属性可以不写，但是style这一属性必须要有，不写显示不出来边框

单独设置某一个边框的多个属性

去掉某个边框

border-top: 20px solid #f00;

border-right: 20px dotted  #00f;

border-bottom: 20px dashed #0ff;

border-left: 20px double #f0f;

border-top: 0;

border-right: 0;

border-bottom: 0;

border-left:0;

border-width: 100px;----一次设置4个边框的粗细

border-style: solid;-----------一次性设置4个边框的样式

border-color: #CCFF00;------------一次性设置4个边框的颜色

把直角倒成圆角

border-radius:圆角的半径

取值：1.px为单位的数字 

      2.%  50%就是圆

单角的定义，圆角之间会相互影响

单角的设置可以超过50%

border-top-right-radius: 100%;

border-bottom-right-radius: 100%;

border-top-left-radius: 1%;

border-bottom-left-radius: 10%;

画一个柠檬或者芒果

单角的简写方式：

Border-radius: 左上  右上  右下 左下

box-shadow: h-shadow  v-shadow  blur  spread  color;

h-shadow  x轴偏移量

v-shadow  y轴偏移量

blur       阴影模糊程度

spread     阴影大小

color      阴影颜色

inset      内部阴影

多用于修饰文本框和按钮

是边框外部一圈线条，不占页面空间

一般默认有，一般我们会把轮廓清除掉

设置的方式跟border一样

outline: width style color; 

        轮廓的粗细 样式 颜色

清除轮廓outline:0;  outline:none;

所有元素皆为框，所有元素在页面上都占据空间，这空间默认不许其它元素占据

计算元素在页面上占据空间的公式----盒子模型

默认盒子模型计算公式为：

元素实际占地宽度：

左外边距+左边框+左内边距+内容区域的宽度+右内边距+右边框+右外边距

元素实际占地高度：

上外边距+上边框+上内边距+内容区域的高度+下内边距+下边框+下外边距

外边距，边框以外的距离，改变外边距，元素有位移效果

在浏览器上的body区域内没有颜色，但是f12中外边距，橘黄色

外边距在页面中是透明的

使用场合，改变元素位置，改变元素之间的距离

margin:v1;  同时设置4个方向外边距

margin-top:上外边距

margin-right右外边距

margin-bottom 下外边距

margin-left 左外边距

取值：1.px为单位的数字

     2.%  上右下左都是父元素宽度的百分比

     3.auto 对上下外边距无效！！！！！！

      让块级元素本身在父元素内水平居中，对行内和行内块元素无效

margin：v1; 同时设置4个方向

margin:v1  v2;  上下  左右  margin:0 auto;  margin:20px auto;

margin:v1 v2 v3;  上   左右   下

margin:v1 v2 v3 v4;  上右下左

元素在页面上渲染的时候，默认以左上角开始渲染，

想改变元素位置，设置左外边距和上外边距

外边距左右冲突，以左为准，上下冲入，以上为准

默认布局的元素，不要用右外边距设置元素水平位移，左外边距设置位移

               右外边距只负责控制当前元素与右侧元素之间的距离

图出不来！！！！！！!!Px没写

03_ex.html

两个div，#d1,#d2.宽高200px，设置不同背景色，要求这两个div之间的距离为50px--------------------使用3种设置方式，

Div d1  d2  300*300  150*150  不同背景色d2设置上外边距，f12改变这个值，观察效果

为两个div设置4个方向外边距，观察效果

两个span，#s1,#s1.lorem2，设置不同背景色

为两个span设置4个方向外边距，观察效果

两个input，#n1,#n1

为两个input设置4个方向外边距，观察效果

只有上下两个外边距（bottom--top）外边距相遇时，会合并成一个

值以大的为准

解决方案：1.只写一个元素的上外边距，或者另一个元素的下外边距

          2.页面设计的时候就进行规避掉

块级元素

行内元素

行内块(input/button)

设置宽高有效

设置宽高无效

设置宽高有效

默认宽，父元素100%

默认高，靠内容撑开

默认宽高，靠内容撑开

浏览器默认设置一个宽高

不同浏览器给的宽高不同。

一般要写兼容，css reset

4个方向外边距都有效

上下外边距无效

4个方向外边距都有效

改变行内块上外边距

行内块会带着同一行其它行内元素/行内块一起位移

h1~h6,p,hr,ul,ol

body  4个方向自带8px的外边距

ul  上下外边距16px  左内边距40px

通常，写项目是，提前左css set:

*{margin:0;padding:0;}

在特殊情况下，子元素的上外边距会作用到父元素上（边重合的时候）给子元素设置上边距的时候，父元素会随着子元素一起设置，

特殊情况：1.父元素没有上边框

         2.子元素内容区域的上沿与父元素内容区域的上沿重合

解决方案：

1.给父元素上上边框，但增加了父元素的实际占地高度

2.给父元素添加上内边距，但增加了父元素的实际占地高度

3.给父元素设置overflow:hidden/auto, 如果想溢出显示，就不行了

标准解决方案：

4.给父元素添加一个大儿子，一个空<table></table>

(后期会学习使用css代码生成html元素的写法)

04_ex.html

一个div#parent>div#child

#parent 宽高300px,背景颜色#0ff

#child 宽高150px,背景颜色#f00

#child编写上外边距50px  观察效果

内边距有颜色，颜色为元素背景色

改变内边距，视觉上元素变大了，但是元素的内容区域并没有改变，是改变了内容区域到边框的距离

使用场合：1.把元素撑开

          2.在某些情况下也可以设置元素间的距离          

          3.把内容区域位移（前提：元素没有背景色）

padding:v1指定一个值时，设置4个方向内边距

padding:v1 v2;只有2个值时，第一个值：上下 第二个：右左

padding:v1 v2 v3; 分别指：上  右左  下

padding:v1 v2 v3 v4; 上 右 下 左

padding-top

padding-right

padding-bottom

padding-left

取值：①padding没有auto值

      ②px为单位

      ③% 父元素宽度的百分比

     内边距不能设置auto

box-sizing:

        ①content-box 默认值，设置的width为内容区域宽度，

         width=content

  如果项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，例如，框占窗口宽度的50%（框会随着窗口的变大变而改变），但边界和内边距使用像素来表示的怎么办？为了避免上述问题，可以使用border-box来调整框墨香，

        ② border-box设置的width

            width=border+padding+content

           设置好padding和border以后，内容区域会根据实际的剩余空间进行缩放

当width设置为百分比的时候，一般使用border-box比较好控制