系统学习前端之CSS---day03

obsession36

已于 2023-12-24 14:43:35 修改

阅读量859

点赞数 20

分类专栏： CSS 文章标签：前端学习 css

于 2023-12-24 14:40:35 首次发布

本文链接：https://blog.csdn.net/weixin_63522291/article/details/135181389

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、CSS引入的几种方式

行内式

冗余代码多，代码量大
不利于维护和修改
优先级相对来说较高，个别特殊的效果可以使用，但是不要滥用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>行内式引入css</title>
  </head>
  <body>
    <ul>
      <li style="background-color: green;width: 100px;height: 100px;"></li>
      <li style="background-color: green;width: 100px;height: 100px;"></li>
      <li style="background-color: green;width: 100px;height: 100px;"></li>
      <li style="background-color: green;width: 100px;height: 100px;"></li>
      <li style="background-color: green;width: 100px;height: 100px;"></li>
      <li style="background-color: green;width: 100px;height: 100px;"></li>
      <li style="background-color: green;width: 100px;height: 100px;"></li>
      <li style="background-color: green;width: 100px;height: 100px;"></li>
      <li style="background-color: green;width: 100px;height: 100px;"></li>
      <li style="background-color: green;width: 100px;height: 100px;"></li>
      <li style="background-color: green;width: 100px;height: 100px;"></li>
      <li style="background-color: green;width: 100px;height: 100px;"></li>
    </ul>
  </body>
</html>

内嵌式

在<head>标签里面通过<style>标签来写

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>内嵌式引入css</title>
    <style>
        div,p{
            width:500px;
            height:200px;
            background:greenyellow;
            color:hotpink;
        }
    </style>

  </head>
  <body>
    <div>
      <p></p>
    </div>
  </body>
</html>

外链式

在<head>标签里面通过<link>标签把样式表给链接过来

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>外链式引入css</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <div>
      <p></p>
    </div>
  </body>
</html>

导入式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>导入式引入css</title>
    <style>
      @import "index.css";
    </style>

  </head>
  <body>
    <div>
      <p></p>
    </div>
  </body>
</html>

二、清除默认样式

1、清除页面中元素默认自带的margin值和padding值

` * `是通配符选择器，代表选中页面中所有的元素，下面代码的意思就是，

把页面中所有元素默认自带的margin值和padding值都归为0.

*{
  margin:0;
  padding:0;
}

2、清除列表前面默认的样式

ul,ol{
  list-style: none;
}

3、清除a标签下划线

a{
  text-decoration: none;
}

三、基础样式的设置：

1、文本颜色的设置（color）

color属性: 设置文字颜色（可以继承的）

① 可以直接设置颜色的名字（开发中很少使用，因为不精确）

red
green
yellow
pink
blue
grey
purple
orange
lightblue
lightgreen
greenyellow
yellowgreen
.........

② 设置为三原色 红r 绿g 蓝b

- 所有颜色都是由这三种颜色调制出来的
- 每一个颜色的值都是 0-255之间
- rgb(30,120,200)
- 颜色还可以设置不透明度 ,可以使用 rgba(20,111,111,.7)

③ 颜色还可以设置为十六进制（不能设置透明度）

- #加上16进制的颜色值 6位
- #112233--> 11代表red的十六进制值 22代表green颜色的十六进制值 33代表blue颜色十六进制值
- 十六进制颜色提供简写：当1,2位一样并且3,4位一样并且5,6一样的时候可以每一位简写一个#112233-->#123 #aabb11-->#ab1 #000000-->#000 #111222-->#111222

2、关于a标签颜色的继承

a标签比较特殊，如果a标签没有href属性，a标签没有默认样式，那么继承颜色生效
但是如果a标签拥有href属性，a标签链接的自带样色会盖过继承
所以在开发中给a标签设置颜色，需要直接对a标签进行设置

3、font-family：设置字体(可以继承)

常见中文字体："Microsoft YaHei"、"SimHei"、"SimSun"
但是我们设置的字体用户可能没有，我们需要设置备用字体在font-famliy后书写多个字体，使用逗号隔开，浏览器会依次检测支持为止，否则将执行默认字体
如果是中文字体，或者是英文字体由多个单词组成需要加单引号或者双引号

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>font-famliy</title>
    <style>
      .box{
        font-family: "Microsoft YaHei";
        font-family: "SimSun";
        font-family: "SimHei";
        font-family: "SimHei","SimSun","Microsoft YaHei";
      }
    </style>
  </head>
  <body>
    <div class="box">
      哈哈哈哈
      <span>笑个鬼</span>
    </div>
  </body>
</html>

4、font-size：设置字体大小

常用的单位是px、em、rem
可以设置小数（低版本ie不支持）
字号最好不要设置为奇数
浏览器都有自己的默认字号大小和最小字号，谷歌浏览器默认字号大小是16px，谷歌浏览器支持的最小字号多数是12px如果设置12以下，字体不支持，但是如果设置字号为0 那么文字高度为0，消失！

5、字体风格：font-style（可以继承）

normal：正常多数元素的默认值对于默认倾斜或斜体的元素 i em 可以调整成正常非倾斜样式
italic 让元素呈现斜体一般指的是一个字体在字体设计的过程中，会对一个文字设计 正常体斜体粗体 等状态而italic只是选择让使用斜体显示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>字体风格</title>
    <style>
      em,i{
        font-style: normal;
      }
      .outer{
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <div>
      <em>em</em>
      <i>i</i>
    </div>
    <div class="outer">
      outer中
      <!-- 继承斜体的样式 -->
      <span>span里</span>
    </div>
  </body>
</html>

6、font-weight:(继承)

用来定义字体的粗细其实目前浏览器只支持3个级别细正常粗

normal：正常粗细可以将默认加粗的字体进行改变为正常比如 b strong
bold：加粗
100-900 整除100的整数：因为浏览器只支持细粗正常3个所以100-300 是细，400-500 正常，600-900 加粗

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>font-weight 字体粗细</title>
    <style>
      .outer b,.outer strong{
        font-weight: normal;
      }
      .box{
        font-weight: bold;
      }
      .box span{
        font-weight: lighter;
      }
      .box span em{
        /*font-weight: lighter;*/
        font-weight: bolder;
      }
      
      .con{
        font-weight: 100;
      }
      
    </style>
  </head>
  <body>
    <div class="outer">
      <b>小b</b>
      <strong>小s</strong>
    </div>
    <div class="box">
      我是一个box
      <span>我是一个span <em>我是em</em></span>
    </div>
    <div class="con">
      我是con
    </div>
  </body>
</html>

7、text-indent首行文本缩进

单位是px 缩进的像素
em单位 em是一个相对单位，1em=当前文字的字号大小如果缩进两个文字那么2em
只针对块级元素生效

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>10.text-indent首行文本缩进</title>
    <style>
      p{
        width: 200px;
        background-color: yellow;
        font-size:16px;
        /*text-indent: 32px;*/
        text-indent: 2em;
      }
      span{
        text-indent: 2em;
      }
    </style>
  </head>
  <body>
    <p>
      今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好
      <br>
      <span>
        真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊
      </span>
    </p>
  </body>
</html>

8、text-align:(继承)

规定行内的内容如何相对于它的块级父元素水平方向对齐
并不是控制元素自己的对齐，只是控制它里边的行内容水平方向对齐

left：默认左对齐
center：居中
right：右对齐

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>文本对齐</title>
    <style>
      .outer{
        width: 600px;
        height: 200px;
        background-color: red;
        text-align: center;
      }
      .con{
        width: 300px;
        height: 100px;
        background-color: yellow;
        
        text-align: center;
        text-align: right;
        line-height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="con">
        hello world <span>span</span>
      </div>
    </div>
  </body>
</html>

9、表示背景颜色：background-color

背景颜色设置：background-color:颜色值（和color的颜色一致十六进制 rgba 颜色单词）

10、text-decoration：文本修饰（不继承）

虽然不继承，但是延伸到后代元素，因为后代元素属于这个元素的下划线范围

none：取消下划线
underline:下划线
overline:上划线
line-through：删除线

11、一个元素的宽度（width）表示高度（height）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>宽高</title>
    <style>
      div {
        width: 600px;
        height: 200px;
        background-color: red;
      }
  
    </style>
  </head>
  <body>
    <div>
      
    </div>
  </body>
</html>

12、让块级元素水平居中：margin:0 auto;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>margin</title>
    <style>
      div{
      width:100px;
      height:100px;
      background:green;
      margin:0 auto;
    }
  
    </style>
  </head>
  <body>
    <div>
      
    </div>
  </body>
</html>

13、边框：border

<style>
div{
  width:200px;
  height:200px;
  /* border:2px solid darkturquoise; */
  border:2px dashed darkturquoise; 
}
</style>

14、border 是简写属性，设置所有的边框属性。

可以按顺序设置如下属性：

border-width
border-style
border-color

border-style可能的值：

15、想让两个块级元素在一行显示，转换为行内块产生的问题

两个块级元素之间会有缝隙（原因回车造成的）

不仅仅两个块元素在一行，两张图片在一行都会存在这个问题

解决的办法：

在结构中消除换行符
给他们的父级设置font-size:0;如果里面的子元素需要设置文字大小，再单独设置即可。
浮动也可以解决（后面学）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      font-size: 0;
    }

    img {
      width: 300px;
      height: 200px;
      /* font-size: 0; */
    }
  </style>
</head>

<body>
  <img src="./img/1.png" alt="">
  <img src="./img/2.png" alt="">
</body>

</html>

16、overflow属性

overflow属性定义一个内容太大无法适应容器的时候应该怎么做
设置给被超出的元素

- visible：默认，内容不会被修剪，而是显示在元素的框外
- hidden:超出内容被修剪，修剪掉的内容不可见，并且没有滚动条
- scroll：超出内容被修剪，浏览器显示滚动条方便查看被修剪的内容
- auto：浏览器定夺，如果内容超出就生成滚动掉，否则不生成

overflow：auto和scroll的区别：

- auto:是自动生成滚动条，不超出不生成超出才生成
- scroll：无论是否超出都会生成滚动条

overflow-x：overflow-y：只控制x和y的超出情况

17、visibility属性：

控制元素显示或者隐藏

hidden:控制元素隐藏
- 保留原来的位置，其他元素的布局没有发生改变
- 相当于此元素变透明
- visibility属性是继承的，里边的子元素也全部都继承属性，并且隐藏了
- 如果给子元素设置visible覆盖，那么子元素可以进行显示
visible：让visibility：hidden隐藏的元素显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>visibility属性</title>
    <style>
        .box{
            width: 600px;
            height: 400px;
            background: yellow;
        }
        .con1{
            width: 300px;
            height: 100px;
            background-color: pink;
            visibility: hidden;
        }
        .con1 .inner{
            width: 100px;
            height: 50px;
            background-color: #5ab3f4;
            visibility: visible;
        }
        .con2{
            width: 300px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="con1">
            <div class="inner"></div>
        </div>
        <div class="con2"></div>
    </div>
</body>
</html>

18、opacity透明度：

指定了一个元素的透明度

当opacity作用在某一个元素上的时候，把这个元素和里边的内容当成一个整体看待即使里边的元素没有继承opacity。它也和父级有一样的透明度
opacity的取值是 1-0
- 1代表完全不透明
- 0代表完全透明

obsession36

关注

20
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
系统学习前端之CSS---day03

在标签里面通过标签把样式表给链接过来。` * `是通配符选择器，代表选中页面中所有的元素，下面代码的意思就是，把页面中所有元素默认自带的margin值和padding值都归为0.虽然不继承，但是延伸到后代元素，因为后代元素属于这个元素的下划线范围。在标签里面通过标签来写。不仅仅两个块元素在一行，两张图片在一行都会存在这个问题。color属性: 设置文字颜色（可以继承的）两个块级元素之间会有缝隙（原因回车造成的）指定了一个元素的透明度。③ 颜色还可以设置为。
复制链接

扫一扫