Web前端入门 CSS

1、初识CSS


  1. CSS是什么?
  2. CSS怎么用?
  3. CSS选择器
  4. 美化网页(文字,阴影,超链接,列表,渐变…)
  5. 盒子模型
  6. 浮动
  7. 定位
  8. 网页动画(特效效果)

参考手册

HTML中文网

1.1、什么是CSS?

Cascading Style Sheet 层叠样式表

CSS:表现(美化网页)

字体、颜色、边框、高度、宽度、背景图片、网页浮动、网页定位

1.2、发展史

  • CSS1.0
  • CSS2.0 DIV (块) + CSS, HTML与CSS结构分离的思想,网页变得简单,SEO
  • CSS2.1 浮动, 定位
  • CSS3.0 圆角,阴影,动画…浏览器兼容性~

1.3、快速入门

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <!-- 规范,可以编写css的代码,每一个声明,最好以 ;结尾
  语法:
      选择器{
          属性:值;
          属性:值;
          属性:值;
          .....
      }
-->
  <style>
    *{margin:0;padding:0;}
    h1{
        font-size: 16px;
        color: red;
    }
  </style>
</head>
<body>
   <h1>我是标题</h1>
</body>
</html>

建议使用link嵌入css代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
   <h1>我是标题</h1>
</body>
</html>

1.4、CSS的3种导入方式

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test</title>
    <!--内部样式-->
  <style>
      h1{
          color: green;
      }
  </style>

  <!--外部样式-->
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!--优先级:就近原则-->

    <!--行内样式:在标签元素中,编写一个style属性,编写样式即可-->
   <h1 style="color: coral;">我是标题</h1>
</body>
</html>

扩展:外部样式两种写法

  • 链接式(先渲染样式,后加载结构 推荐使用)XHTML

    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">
    
  • 导入式(先加载结构,后渲染样式)@importCSS2.1特有

    <!--导入式-->
    <style>
         @import url("css/style.css");
    </style>
    

2、选择器


2.1、基本选择器

html结构

作用:选择页面上的某一个或者某一类元素

  1. 标签选择器 选择一类标签 标签名{}

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>Test</title>
      <style>
           /*
            标签选择器 标签名{}
            会选择到页面上所有的这个标签的元素
           */
           h1{
               color: red;
               font-weight: normal;
           }
           p{
               font-size:35px;
           }
      </style>
    </head>
    <body>
       <h1>学WEB</h1>
       <h1>学WEB</h1>
       <p>提升自己!</p>
    </body>
    </html>
    
  2. 类选择器 class:选择所有class属性一致的标签, 跨标签.类名{}

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>Test</title>
      <style>
          /*
            类选择器:.class的名称{}
            好处,可以多个标签归类,是同一个class
          */
          .one{
              color: red;
          }
          .two{
            color: green;
          }
          .three{
              color: blue;
          }
      </style>
    </head>
    <body>
       <h1 class="one">标题一</h1>
       <h1  class="two">标题二</h1>
       <h1 class="three">标题三</h1>
       <p class="one">p标签</p>
    </body>
    </html>
    
  3. id选择器 id:全局唯一! #id名{}

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>Test</title>
      <style>
          /* 
            id选择器    #id名称{}
            id必须保证全局唯一
          */
          #one{
              color: red;
          }
          .one{
              color: green;
          }
          .two{
            color: orange;
          }
          h1{
              color: skyblue;
          }
      </style>
    </head>
    <body>
       <h1 class="one" id="one">标题一</h1>
       <h1 class="two">标题二</h1>
       <h1>标题三</h1>
    </body>
    </html>
    

优先级:id选择器>class选择器>标签选择器(不遵循就近原则,固定的)

2.2、层次选择器

html结构

  1. 后代选择器:在某个元素的后面

    /*后代选择器*/
    body p {
        background-color: green;
    }
    
  2. 子选择器(一代,儿子)

    /*子选择器*/
        background-color: red;
    }
    
  3. 相邻兄弟选择器(同辈)

    /*相邻兄弟选择器 只有一个,(向下延伸)*/
    .two+p {
        background-color: blue;
    }
    
  4. 通用兄弟选择器

    /*通用兄弟选择器 当前选中的元素的向下的所有兄弟元素*/
    .two~p {
        background-color: skyblue;
    }
    

2.3、结构伪类选择器

/*ul的第一个子元素*/
ul>li:first-child {
    background-color: red;
}

/*ul的第一个最后子元素*/
ul>li:last-child {
    background-color: green;
}

/*选择当前p元素的父级元素,选择父级元素的第二个,并且是当前元素才生效!
(按照顺序!)
*/
p:nth-child(2) {
    background-color: skyblue;
}

/*选中父元素下的p元素的第二个。(按照类型!)*/
p:nth-of-type(1) {
    background-color: coral;
}

/*注:even(偶数)odd(奇数)

详解:

选择器功能描述
E:first-child作为父元素的第一个子元素的元素E
E:last-child作为父元素的最后一个子元素的元素E
E F:nth-child(n)选择父级元素E的第n个子元素F,(n可以是1、2、3),关键字为even、odd
E:first-of-type选择父元素内具有指定类型的第一个E元素
E:last-of-type选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)选择父元素内具有指定类型的第n个F元素

2.4、属性选择器

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style>
      .demo a{
          float: left;
          width: 100px;
          height: 100px;
          text-align: center;
          line-height: 100px;
          background-color: wheat;
          text-decoration: none;
          margin: 0 20px;
          border-radius: 10px;
          font-size: 20px;
          font-weight: bold;
          color: white;
      }
      /*存在id的元素*/
      .demo>a[id]{
          color: green;
      }

      /*id等于first的元素*/
      .demo>a[id="first"]{
          background-color: red;
      }
      /*class中包含links的元素
      */
      .demo>a[class*='links']{
          background-color: skyblue;
      }
      /*选择href中以http开头的元素*/
      .demo>a[href^=http]{
          background-color: yellow;
      }

      /*选择href中以jpg结尾的元素*/
      .demo>a[href$=jpg]{
          background-color: orange;
      }
  </style>
</head>
<body>
   <p class="demo">
       <a href="http://www.baidu.com" class="links item first" id="first">1</a>
       <a href="#" class="links item active" target="_blank" title="test">2</a>
       <a href="images/1.jpg" class="links item">3</a>
       <a href="images/2.jpg" class="links item">4</a>
       <a href="#" class="links item">5</a>
       <a href="#" class="links item">6</a>
       <a href="#" class="links item">7</a>
       <a href="123.pdf" class="links item">8</a>
       <a href="#" class="links item" id="k">9</a>
       <a href="#" class="links item last">10</a>
   </p>
</body>
</html>

= 绝对等于

*= 包含这个元素

^= 以……开头

$= 以……结尾

3、美化网页元素


3.1、为什么要美化网页?

  1. 有效的传递页面信息
  2. 美化网页,网页好看,才能吸引用户
  3. 凸显页面的主体
  4. 提高用户的体验

span标签:重点要突出的字,使用span包裹起来

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style>
    .font{
        font-size: 26px;
        color: red;
    }
  </style>
</head>
<body>
   <p>欢迎学习<span class="font">WEB</span>前端</p>
</body>
</html>

3.2、字体样式

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <!--
    font-family  字体类型
    font-size    字体大小
    font-style   字体风格
    font-weight  字体的粗细
  -->
  <style>
    body{
        font-family: 'Courier New',"楷体";
        color: orange;
    }
    h1{
        font-size: 16px;
    }
    .p1{
        font-weight: bolder;
        font-style: oblique;
    }
  </style>
</head>
<body>
   <h1>内容介绍</h1>

   <p class="p1">金耀基尝言,一自由独立是通识的基础,后者又反过来加强前者。在教育中排除掉通识,则摧毁其生命。致力通识教育,是世界范围内有抱负的大学的重要目标。关于通识教育,l946年华盛顿大学诺斯兰教授的定义是:“其主旨在个人的整体健全发展,包含提升生活的目的、提炼对情绪的反应,以及运用我们最好的知识来充分了解各种事物的本质</p>
</body>
</html>

补充:

font-weight属性

normal:正常 (默认,等同400)

bold:粗体 (等同700)

bolder:更粗 (等同900)

bolder:更细 (等同100)

font属性

简写:字体风格→字体粗细→字体大小→字体类型

p{font:oblique bold 12px "楷体";}

3.3、文本样式

  1. 颜色 color rgb rgba
  2. 文本对齐方式 text-align:center;
  3. 首行缩进 text-indent:2em;
  4. **行高 line-height:**单行文字上下居中!line-height = height
  5. 装饰 text-decoration:none;
  6. 文本图片垂直对齐 vertical-align:middle;

3.4、文本阴影

/* text-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径 */
a{
    text-shadow: red 10px 5px 5px;
}

3.5、超链接伪类

伪类名称含义示例
a:link未单击访问时超链接样式a:link{color:red;}
a:visited单击访问后超链接样式a:visited {color:green;}
a:hover鼠标悬浮其上的超链接样式a:hover{color:blue;}
a:active鼠标单击未释放的超链接样式a:active {color:pink;}

注:设置伪类的顺序:a:link->a:visited->a:hover->a:active

3.6、列表

/* list-style: 
    none    无标记符号
    circle  实心圆
    decimal 数字
    square  实心正方形
    disc    空心圆
*/

ul>li{
    list-style: none;
    line-height: 30px;
    text-indent: 2em;
}

3.7、背景

background-color:背景颜色

background-image:背景图片

background-position:背景定位

background-repeat:背景重复

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style>
      /*默认全部平铺 repeat*/
    div{
        width: 1200px;
        height: 2000px;
        /*颜色 图片 定位 平铺*/
        background: skyblue url(./images/6.jpg) 200px 200px no-repeat;
    }
  </style>
</head>
<body>
   <div></div>
</body>
</html>

3.8、渐变

grabient

background的渐变色虽然看起来像颜色,但是它在渲染的时候其实是一张“图片”

body{
    background-color: skyblue;
    background-image: linear-gradient(115deg,#ffffff,0%,#6284ff 50%,#ff0000 100%);
}

浏览器兼容性

  • IE浏览器是Trident内核,加前缀:-ms-

  • Chrome浏览器是Webkit内核,加前缀:-webkit-

  • Safari浏览器是Webkit内核,加前缀:-webkit-

  • Opera浏览器是Blink内核,加前缀:-o-

  • Firefox浏览器是Mozilla内核,加前缀:-moz-

4、盒子模型


4.1、什么是盒子模型?

盒子模型

margin:外边距

padding:内边距

border:边框

4.2、边框

  1. border-width:边框粗细
  2. border-style:边框样式
  3. border-color:边框颜色
#box{
    width: 200px;
    height: 200px;
    background-color: pink;
    border: 1px dashed red;
}

4.3、内外边距

外边距的妙用

/*网页居中对齐*/
#box{
    margin:0px  auto
	width:100%;
    height:600px;
}
/*
网页居中对齐的必要条件
    块元素
    固定宽度
*/

设置顺序:

  • 当四个值时:排列顺序为上 右 下 左
  • 当三个值时:排列顺序为上 左 右 下
  • 当二个值时:排列顺序为上 下 左 右
  • 当一个值时:排列顺序为上 下 左 右

盒子的间距:

* 内间距padding的特点:会撑大自身、不会改变自身位置 
* 外边距margin的特点:会影响自身盒子位置,但不会改变自身盒子大小、同时也不会改变父级

盒子模型的计算方式,你这个盒子模型到底有多大?

标准盒模型:盒子模型总尺寸=border+padding+margin+内容宽度

4.4、圆角边框

/*顺序:左上 右上 右下 左下*/
/*圆形要点:
元素的宽度和高度必须相同
圆角的半径为元素宽度的一半,或者直接设置圆角半径值为50%
*/
#box{
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 50%;
}
/*
半圆形要点:
制作上半圆或下半圆时,元素的宽度是高度的2倍,而且圆角半径为元素的高度值
制作左半圆或右半圆时,元素的高度是宽度的2倍,而且圆角半径为元素的宽度值
*/
#box{
    width: 200px;
    height: 100px;
    background-color: red;
    border-radius: 100px 100px 0 0;
}
/*
扇形
利用border-radius属性制作扇形遵循“三同,一不同”原则
三同”是元素宽度、高度、圆角半径相同
“一不同”是圆角取值位置不同
*/
#box{
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 100px 0 0 0;
}

4.5、盒子阴影

img{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    box-shadow: 5px 5px 5px red,
        10px 10px 10px green,
        15px 15px 15px rgb(167, 22, 235);
}
/*阴影类型 X轴位移 Y轴位移 模糊半径 颜色*/

5、浮动


5.1、标准文档流

什么是标准文档流?

标准文档流:指元素根据块元素或行内元素的特性按从上到下,从左到右的方式自然排列。这也是元素默认的排列方式

块级元素(block)独占一行,高度由内容撑开、宽度默认继承父级宽度

<h1><h6><p><div><ul><li></li></ul>

内联元素(inline)不独占一行,能跟其他行内元素共享一行空间、 不支持宽高

<span><a><img/><strong>...

行内元素可以被包含在块级元素中,反之,则不可以~

5.2、display属性

<!--
block  块元素的默认值 前后带有换行符
inline  内联元素的默认值 前后没有换行符
inline-block 行内块元素 既有内联元素的特性,又有块级元素的特性
none   设置元素不会被显示
-->
<style>
div{
    width: 100px;
    height: 100px;
    border: 1px red solid;
    display: inline-block;
}
span{
    width: 100px;
    height: 100px;
    border: 1px red solid;
    display: inline-block;
}

display也是一种实现块元素并排的方式,但我们更多都是使用浮动

5.3、float属性

元素并排显示:浮动float:left\right

浮动元素的特点:

  1. 自身浮动后会脱离文档流
  2. 浮动元素不会撑开父级高级【父级高度坍塌】
  3. 如果浮动元素是行内元素,那么这个时候行内元素能支持宽高,能支持margin和padding(浮动属性将行内元素的特性改为了块级特性)

5.4、浮动导致父级边框塌陷的问题(BFC)

BFC是什么?

​ BFC:元素内部的所有的子元素的行为不会影响外界的元素。

BFC如何触发?

  1. 浮动
  2. overflow 只要他值不是visible就可以触发
  3. display为inline-block、table-cell、flex、table-caption或者inline-flex 【不推荐使用】
  4. position定位absolute和fixed

清除浮动,防止父级边框塌陷的四种方法

  • 浮动元素后面加空div

    空div会造成HTML代码冗余

    <div style="clear: both;"></div>
    
  • 设置父元素的高度
    元素固定高会降低扩展性

.box{
    width: 100%;
    height: 500px;
    border:5px red solid;
}
  • 父级添加overflow属性(hidden、auto)
    下拉列表框的场景不能用
.box{
    width: 100%;
    overflow: hidden;
    border:5px red solid;
}
  • 父级添加伪类after
    写法比上面稍微复杂一点,但是没有副作用,推荐使用
.box::after{
    content: '';
    display: block;
    clear: both;
}

超出隐藏:

overflow: hidden

  • ​ hidden:超出部分全部隐藏
  • ​ scroll:不管超不超出都有滚动条(分为x、y)
  • ​ auto:自动区分

5.5、display和浮动的对比

  • display

    方向不可控制

  • float

    浮动起来的话会脱离标准文档流,所有要解决父级边框塌陷的问题~

6、定位(position)


6.1、相对定位

相对定位:relative
参考目标为自身原来的位置,进行偏移。不会脱离文档流

6.2、绝对定位

绝对定位:absolute
参考目标直系父辈离自己最近的一个position的值不为static的标签 ,进行偏移。 脱离文档流

6.3、固定定位

固定定位:fixed
参考目标:浏览器窗口 进行上、下、左、右偏移 脱离文档流

经验:

相对定位的特性

  • 元素位置发生偏移后,它原来的位置会被保留下来
  • 层级提高,可以把标准文档流中的元素及浮动元素盖在下边
  • 使用场景(很少单独使用)

绝对定位的特性(通常配合相对定位一起使用~)

  • 元素位置发生偏移后,原来的位置不会被保留
  • 如果没有设置定位父级,则相对浏览器窗口来定位
  • 层级提高,可以把标准文档流中的元素及浮动元素盖在下边
  • 使用场景(下拉菜单、焦点图轮播、弹出数字气泡)

改变定位视图后会不会影响周边元素的位置?

​ 脱离文档流【脱离的程度远远大于浮动脱离的程度】

子元素在绝对定位时:选定的参考目标要基于如下的思路:

  1. 在能满足条件的基础上,选择最近的

  2. 元素脱离后,后续在文档流中的元素会上来取代当前元素的位置。{写代码时要可预见的提前布局}

固定定位的特性

  • 相对浏览器窗口来定位
  • 使用场景(窗口左右两边的固定广告、返回顶部图标~)

注:

  • 脱离文档流后,父级标签的height不能撑开
  • 被绝对定位或固定定位后的元素都是块级盒子特性

6.4、偏移量方向

偏移设置: left、right、top、bottom

6.5、z-index

什么是z-index?

调整元素定位时重叠层的上下位置,该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远

图层~

z-index:

  • 非定位元素和正常定位但未设置z-index值的定位元素层级都可以记为0
  • IE FireFox Safari的z-index最大值是2147483647 ,Opera的最大值是2147483584
  • 仅能在定位元素上生效

opacity :

  • 设置元素的不透明级别
  • 从 0.0 (完全透明)到 1.0(完全不透明)

filter:Alpha(opacity=50)

注:IE8 以及更早的版本支持替代的 filter 属性

布局

  • 布局时如果能不使用浮动和定位能实现效果,就尽量不要使用。
  • 如果是多个相同元素并排,使用浮动
  • ​ 单一元素,不管位置在那一般就可以使用定位

7、动画和CSS3变换

7.1、如何在网页中实现动画效果?

  • 动态图片
  • Flash
  • JavaScript

7.2、CSS3变换

transform(变换):旋转、位移、斜拉、缩放

旋转

rotate(deg)   二维空间旋转(角度值,角度值的单位deg°)
rotate3d(x, y, z)
rotateX()
rotateY()
rotateZ()

缩放

scale(x, y)
scale3d(x, y, z)
scaleX()
scaleY()
scaleZ()

位移

translate(x, y)
translate3d(x, y, z)
translateX()
translateY()
translateZ()

斜拉

skew(x, y)
skewX()
skewY()

transform-origin: 设置坐标轴原点
transform-style:flat(2d视角默认值)、preserve-3d(3d视角)

perspective-origin:视角位置
perspective:视距(以像素记的长度值,但不需要写单位)

7.3、CSS3过渡

transition呈现的是一种过渡,是一种动画转换的过程,如渐现、渐弱、动画快慢等

transition:(不能接管display)

  • 需要接管的属性:分属性名字、当有多个属性时可以使用all
  • 持续时间:时间值, ms毫秒【1秒=1000毫秒】 s秒
  • 运动曲线:匀速、加速、减速
  • 延迟时间:时间值
transition: all 2s linear 1s;

7.4、过渡的触发机制

  • 伪类触发 (hover、active、focus、checked)
  • 媒体查询 (通过@media属性判断设备的尺寸,方向等)
  • JavaScript触发 (脚本)

7.5、CSS3动画

animation实现动画主要由两个部分组成

  • 使用关键帧来声明一个动画
  • 调用关键帧来一个动画

​ 应用(animation):动画名称 持续时间 运动方式 延迟时间 播放次数 是否反向播放
​ 定义:动画名称{
​ 设定动画的各个阶级的值【起点、终点】
​ }

#box{
    width: 300px;
    height: 300px;
    background-color: burlywood;
    animation: changeColor 6s linear 3s infinite alternate;
    transform: 2s;
}
@keyframes changeColor{
    0%{
        background-color: red;
    }
    25%{
        background-color: green;
    }
    50%{
        background-color: blue;
    }
    75%{
        background-color: orange;
    }
    100%{
        background-color: purple;
    }
}

7.5、继承

  • css默认值:任何标签在页面显示时,其实所有的css都已经在他身上出现了。
  • 大部分css属性的默认值都是inherit,当css属性值为inherit时,意思就是当前的属性值保持跟父级同属性的值一致,依次向上级标签继承。

8、伪元素


8.1、什么是伪元素?

伪元素指某一类非实际存在于html内的元素标签,这种标签通过css进行添加的。
作用:主要是用于做一些特殊的辅助效果
主要分为两种:before、after

  • 伪元素不能单独创建,基于一个实体标签才能创建。
  • 伪元素的css内有一条必须存在的属性:content,该属性表示伪元素的内容,当伪元素如果没有内容是 就给一个空引号
  • 伪元素默认为行内元素
  • 任意一个实体标签均可以创建两个附属的伪元素,伪元素是实体标签的儿子(before是现在该元素内部所有实体标签之前,after则出现在最后)

first-line 选中第一行文字
first-letter 选中第一个文字

9、盒模型


9.1、什么是盒模型?

盒模型是浏览器解析标签的规则:标准盒模型(浏览器默认的盒模型)、IE盒模型(怪异盒模型)

标准盒模型:

标准盒模型下,width/height的值时设置给内容区,padding和border会撑大容器的占位面积
width/height(100) + padding(302)+ border(202)= 标签的真实占位空间大小

怪异盒模型:box-sizing: border-box

当开启怪异盒模型时,width、height所设置的值分别会被border、padding和content所分享。导致的结果就是会因为padding和border的出现压缩了内部的空间

弹性盒模型:Flexible Box 或 flexbox

内部元素默认情况下单行并列显示。如果容器宽度不够使用时,会自动压缩内部元素的宽度。
交叉轴方向的上宽度或者高度会自动填满整个空间

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页