Css学习

香菲儿 · 发表于 2021-8-13 09:06:00

什么是CSS

怎么学习
1. css是什么
2. css怎么用
3. Css选择器（重点+难点）
4. 美化网页（文字，阴影，超链接，列表，渐变）
5. 盒子模型
6. 浮动
7. 定位
8. 网页动画（特效）

什么是Css
- 层叠样式表
- CSS：表现（美化网页）
- 字体、颜色、边框、高度、宽度、背景图片、网页定位、网页浮动
快速入门
- 内联样式规范，<style>可以编写css的代码，每一个声明最好用分号结尾
  - 语法：选择器
- 外联样式：使用link外联建议使用
  - <link rel="stylesheet" href="css/style.css">
  - 优势：
    1. 内容和表现分离
    2. 网页结构表现统一，可以实现复用
    3. 样式十分的丰富
    4. 建议使用独立于html的css文件
    5. 利用SEO，容易被搜索引擎收录！
CSS的导入方式
- 行内样式：<h1 style="color: skyblue">标题</h1>
- 内部样式style标签：
```
<style>
    h1{
        color: skyblue;
    }
</style>
```
- 外部样式：<link rel="stylesheet" href="css/style.css">，属于HTML标签
- 优先级：行内样式>内部样式>外部样式，遵循就近原则
- 扩展：CSS2.0用导入式，作用是引入CSS样式
```
<style>
    @import "css/style.css";
</style>
```

选择器

作用：选择叶敏上的某一个或者某一些元素

基本选择器

标签选择器

标签选择器会选择到页面上所有的此标签

    <style>
        h1{
            color: skyblue;
        }
    </style>

类选择器

选择所有class属性一致的标签，跨标签
格式：.class的名称{}

好处：可以多个标签归类，是同一个class，可以复用

  <style>
  .a{
    color: skyblue;
  }
  .b{
    color: greenyellow;
  }
  .c{
    color: pink;
  }
  </style>

<h1 class="a">1</h1>
<h1 class="b">2</h1>
<h1 class="c">3</h1>

id选择器

格式：#ID名称{}

id必须保证全局唯一

<style>
    #a{
      color: pink;
    }
    #b{
      color: greenyellow;
    }
    #c{
      color: skyblue;
    }
  </style>

<h1 id="a">1</h1>
<h1 id="b">2</h1>
<h1 id="c">3</h1>

优先级:id选择器>类选择器>标签选择器,不遵循就近原则

层次选择器

后代选择器

在某个元素的后面

      body p{
        background: skyblue;
      }

子选择器

一代儿子

      body>p{
        background: skyblue;
      }

相邻兄弟选择器

同辈，只有一个，相邻向下

      .active + p{
        background: skyblue;
      }

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

结构伪类选择器

结构伪类：定位

<style>
    /* 1.ul第一个子元素
     2.ul最后一个子元素
     3.第一个p元素
     */
    ul li:first-child{
      background: skyblue;
    }
    ul li:last-child{
      background: pink;
    }
   /* 选择当前p元素的父级元素，选择父级元素的第一个，并且是当前元素才生效*/
   p:nth-child(1){
     background: greenyellow;
   }
    /* 选择当前父级元素的p元素的第二个元素*/
   p:nth-last-of-type(2){
     background: yellow;
   }
  </style>

属性选择器

存在ID的元素：属性名=属性值（正则）{}

= 绝对等于
*= 包含这个元素
^= 以这个开头
￥=以这个结尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>

  <style>
    .demo a{
      float: left;
      display: block;
      height: 50px;
      width: 50px;
      border-radius: 10px;
      background: skyblue;
      text-align: center;
      color: darkgray;
      text-decoration: none;
      margin-right: 5px;
      font: bold 20px/50px Arial;
    }
  /*  存在id属性的元素  a[]{}*/
    a[id=first]{
      background: pink;
    }
    a[class*="links"]{
      background: orange;
    }
  /*  选择href中以http开头的元素*/
    a[href^=http]{
      background: yellowgreen;
    }
    a[href$=pdf]{
      background: cornflowerblue;
    }

  </style>
</head>
<body>
<p class="demo">
    <a href="https://www.taobao.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.html" class="links item ">3</a>
    <a href="images/1.png" class="links item ">4</a>
    <a href="images/1.jpg" class="links item ">5</a>
    <a href="abc" class="links item ">6</a>
    <a href="/a.pdf" class="links item ">7</a>
    <a href="/abc.pdf" class="links item ">8</a>
    <a href="abc.doc" class="links item ">9</a>
    <a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>

美化网页元素

作用：有效的传递页面信息，美化网页，凸显页面的主题，提高用户体验

span标签
1. 重点要突出的字使用span套起来

字体样式：

font-fiamily：字体
font-size：字体大小
font-weight：字体粗细
color：字体颜色

font简写：字体风格、字体粗细、大小、样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
  <style>
    body{
      font-family: "Agency FB",华文楷体;
      font-size: 18px;
        color: skyblue;
    }
    p:nth-of-type(1){
      font-weight: inherit;
    }
  </style>
</head>
<body>
<h1>故事介绍</h1>
<p>《魁拔》前身《灵山王》于2009年公布首段片花[1]，2010年4月，片方宣布将该系列更名为《魁拔》[9]，不久之后公布了系列中第一部动画电影的名称：《魁拔之十万火急》[10]。12月初，片方宣布将开展“全优声”配音演员选拔大赛，为本片遴选配音演员[11]。12月30日下午，片方宣布“全优声大赛”正式启动。同时片方还宣称，将与日本配音演员事务所81 Produce合作制作该片的日语版本[12]。</p>
<p>2011年4月底，制作方北京青青树与曾成功运作《喜羊羊与灰太狼》的上海炫动签订合同，后者承诺为本片投入1700万的宣传费用[13]。6月29日，片方在北京万国城百老汇电影中心举行首映[14]。7月7日~8日，片方在北京、上海等地举办了数场首映宣传活动，数名日语版配音演员出席活动（其中柿原彻也与山口理惠出席了上海的宣传活动[15]，关俊彦出席了北京的宣传活动[16]）。</p>
<p>'We get old and get used to each other. We think alike.We read each others minds. We know what the other wants without asking. Sometimes we irritate each other a little bit. Maybe sometimes take each other for granted. But once in awhile, like today, I meditate on it and realise how lucky I am to share my life with the greatest woman I ever met.'
</p>
</body>
</html>

文本样式

颜色
- RGB： 0~F
- RGBA： 0-1
对齐方式
- text-align：center；（居中）
首行缩进
- text-indent: 2em;
行高
- line-height:12px;
- 行高等于高就是文本垂直居中

下划线（装饰）等

text-decoration:：underline;（上划线）
text-decoration：line-through;(中划线)
text-decoration：overline;(下划线)
veretical-align：middle；（水平居中要有参照物）
text-decoration:none;（超链接去下划线）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文本样式</title>
  <style>
      h1{
        color: RGBA(255,158,89,0.2);
        text-align: center;
      }
      p{
        text-indent: 2em;
        line-height: 30px;
      }
      .p1{
      text-decoration: underline;
      }
      .p2 {
        text-decoration: line-through;
      }
      .p3 {
        text-decoration: overline;
      }
  </style>
</head>
<body>
<h1>故事介绍</h1>
<p>《魁拔》前身《灵山王》于2009年公布首段片花[1]，2010年4月，片方宣布将该系列更名为《魁拔》[9]，不久之后公布了系列中第一部动画电影的名称：《魁拔之十万火急》[10]。12月初，片方宣布将开展“全优声”配音演员选拔大赛，为本片遴选配音演员[11]。12月30日下午，片方宣布“全优声大赛”正式启动。同时片方还宣称，将与日本配音演员事务所81 Produce合作制作该片的日语版本[12]。</p>
<p>2011年4月底，制作方北京青青树与曾成功运作《喜羊羊与灰太狼》的上海炫动签订合同，后者承诺为本片投入1700万的宣传费用[13]。6月29日，片方在北京万国城百老汇电影中心举行首映[14]。7月7日~8日，片方在北京、上海等地举办了数场首映宣传活动，数名日语版配音演员出席活动（其中柿原彻也与山口理惠出席了上海的宣传活动[15]，关俊彦出席了北京的宣传活动[16]）。</p>
<p>'We get old and get used to each other. We think alike.We read each others minds. We know what the other wants without asking. Sometimes we irritate each other a little bit. Maybe sometimes take each other for granted. But once in awhile, like today, I meditate on it and realise how lucky I am to share my life with the greatest woman I ever met.'
</p>
<p class="p1">123456789</p>
<p class="p2">123456789</p>
<p class="p3">123456789</p>
</body>
</html>

超链接伪类

a:hover{} （鼠标悬浮颜色）
a:active{} （鼠标按住未释放的颜色）
a:visited{} (已访问)
a:link{} (未访问)

text-shadow：阴影颜色、水平偏移、垂直偏移、阴影半径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接伪类</title>
    <style>
        a{
            text-decoration: none;
            color: black;
        }
        a:hover{
            color: orange;

        }
        a:active{
            color: skyblue;
            font-size: 18px;
        }
        a:link{
            color: yellow;
        }
        a:visited{
            color: yellowgreen;
        }
        p:nth-last-of-type(1){
            text-shadow: 1px 1px skyblue;
        }
    </style>
</head>
<body>

<a href="#">
    <img src="image/a.jpg" alt="">
</a>
<p><a href="#">皮卡丘</a></p>
<p><a href="#">黄色</a></p>
<p><a href="#">电</a></p>


</body>
</html>

列表

list-style:none; (去除列表前面的点)
1. noen ：去掉数字圆点
2. circle：空心圆
3. decimal：有序列表
4. square：正方形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <link rel="stylesheet" href="Css/style.css">
</head>
<body>
<div class="nav">
<h2 class="tit1e"> 全部商品分类</h2>
<ul>
    <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#"> 音像</a>&nbsp;&nbsp;<a href="#"> 数字商品</a></li>
    <li><a href="#"> 家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
    <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#" >办公</a></li>
    <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
    <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
    <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
    <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
    <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
</ul>
</div>
</body>
</html>

.nav{
    width: 300px;
    background: cornflowerblue;
}

h2 {
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: skyblue;
}

ul {
    background: cornflowerblue;
}

ul li {
    height: 30px;
    list-style: none;
    text-indent: 1em;

}

a {
    text-decoration: none;
    font-size: 14px;
    color: black;
}

a:hover {
    color: orange;
    text-decoration: underline;
}

背景

backgroud-image：url（""）;
- 默认全部平铺
- backgroud-repeat：repeat-x；（水平平铺）
- backgroud-repeat：repeat-y；（垂直平铺）
- backgroud-repeat：no-repeat；（不平铺）

    div{
      width: 900px;
      height: 700px;
      border: 1px solid skyblue;
      background-image: url("image/a.jpg");
    }
    .class1{
      background-repeat: repeat-x;
    }
    .class2{
      background-repeat: repeat-y;
    }
    .class3{
      background-repeat: no-repeat;
    }

渐变
- 网站：渐变案例网站
- 径向渐变、圆形渐变
- 网站直接粘贴

盒子模型
- 外边距（margin）
  - body有默认外边距8
  - 妙用（居中）：margin: 0 auto;
    - 前提条件：块元素，块元素有宽度
- 内边距（padding）

边框

边框的粗细
边框的样式
边框的颜色
简写：border：边框粗细、边框样式、边框颜色；
- solid：实线
- dashed：虚线
内外边距计算方式
- margin+border+padding+内容宽度

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
}
#app {
    width: 300px;
    border: 1px solid skyblue;
}
h2{
    font-size: 18px;
    background: yellowgreen;
    text-align: center;
    line-height: 30px;
    color: white;
}
form {
    background: skyblue;
}

div:nth-of-type(1) input {
    border: 1px solid black;
}

div:nth-of-type(2) input {
    border: 1px dashed black;
}

圆角边框
- border-radius：左上右上右下左下
- 可以用px也可以用%表示
阴影
- 盒子阴影：box-shadow: 1px 1px 100px yellow;
浮动
- 标准文档流
  - 块级元素：独占一行
  - 行级元素：不独占一行，可以包含在块级元素中
- display
  - Block:块元素
  - inline：行内元素
  - Inline-block:即是块元素，也是行内元素
  - none：消除
- float
  - 浮动会重新排版
  - clear：both；清除浮动(俩侧不允许有浮动)
- 父级元素塌陷
  - 父级元素设置高度超过所有浮动的高（不建议使用）
  - 增加空的div,清除浮动
  - overflow
    - 在父级元素增加overfloat属性
    - Hidden:隐藏
  - 父类添加一个伪类(最好的方式)
```
#father:after{
  content: '';
  display: block;
  clear: both;
}
```
  - 区别
    - display：方向不可以控制
    - float：浮动起来会脱离文档流，所以要解决父级边框塌陷的问题
- 定位
  - 相对定位
    - 相对于自己原来的位置进行指定的偏移
    - 相对定位仍然在标准文档流中
    - 原来的位置会被保留
    - ```
    position: relative;
    top: 20px;
    left: 20px;
```
- 绝对定位
  - 基于xxx定位
  - 没有父级元素定位的前提下，相对于浏览器定位
  - 要相对于父级元素需要给父级增加相对定位
  - 不保留原来的位置
  - 在父级元素范围内偏移
```
  position: absolute;
  top: 20px;
  left: 20px;
```
- 固定定位
  - 不论怎么都在原来的位置
  - postion:fixed固定定位
- z-index
  - 层级最小0
  - 一般设置999（最高）
- opacity
  - 透明度设置

来源：https://www.cnblogs.com/shi-yao/p/15135838.html

Css学习

什么是CSS

怎么学习

什么是Css

快速入门

CSS的导入方式

选择器

基本选择器

层次选择器

结构伪类选择器

美化网页元素

盒子模型

边框

浏览过的版块