css入门

Posted 2021-09-04 临风而眠

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css入门相关的知识，希望对你有一定的参考价值。

CSS入门(1)

一.何为CSS

摘自百度百科

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现html（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS不是编程语言

Selector是选择器

Property:Value 属性:值

二.先准备好一段html

<!DOCTYPE html>
<html lang="en">
<haed>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
    <title>CSS Crash Course</title>
</haed>
<body>
    <h1>Hello world</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum debitis vel sapiente. At harum, 
        libero voluptates eos porro id sint sapiente facere rerum recusandae ipsum? Ipsum et tempore quae voluptatum,
         culpa adipisci doloremque, quia minus perspiciatis dolorem dolore aspernatur velit cupiditate, 
         eligendi facilis voluptate dignissimos maxime beatae libero doloribus delectus veniam sapiente! 
         Earum ipsa assumenda recusandae deleniti necessitatibus autem eos consequuntur,
          officiis pariatur tempore nostrum quidem voluptates sint voluptate perferendis suscipit enim harum!
         At optio nesciunt aliquid est, animi molestias laudantium. Sint velit rem consequatur ullam odit ratione laborum minima!
          Praesentium rem similique id illo delectus voluptas unde vitae quia?</p>
</body>
</html>

关于<html lang='en'>

关于<meta name=“viewport” …>

<viewport>深入理解

关于<meta>标签中http-equiv属性的属性值X-UA-Compatible详解 chrome=1

VScode 使用lorem在HTML中生成随机文本关于Lorem ipsum

输入lorem100就会自动变成100个字符

link里的rel="stylesheet"是什么意思

三.添加CSS

最后一种不推荐，因为在维护css代码时内联样非常麻烦

第二种样式：

<body>
    <style>
        h1 {
            color: royalblue
        }
    </style>
    <h1>Hello world</h1>
    <p>...</p>
</body>

第三种(不推荐):

 <h1 style="color: red">Hello world</h1>

第一种

先来看CSS选择器介绍

CSS选择器

.paragraph:选择class是paragraph的标签

#para1:选择id是para1的标签

id一般是唯一的，赋予id的时候就要注意使其唯一

★★★CSS选择器使用网站

中文版

把内容放进box1里面

<!DOCTYPE html>
<html lang="en">
<haed>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
    <link rel="stylesheet" href="style.css">
    <title>CSS Crash Course</title>
</haed>
<body>
   <div class="box1">
    <h1>Hello world</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum debitis vel sapiente. At harum,
        libero voluptates eos porro id sint sapiente facere rerum recusandae ipsum? Ipsum et tempore quae voluptatum,
        culpa adipisci doloremque, quia minus perspiciatis dolorem dolore aspernatur velit cupiditate,
        eligendi facilis voluptate dignissimos maxime beatae libero doloribus delectus veniam sapiente!
        Earum ipsa assumenda recusandae deleniti necessitatibus autem eos consequuntur,
        officiis pariatur tempore nostrum quidem voluptates sint voluptate perferendis suscipit enim harum!
        At optio nesciunt aliquid est, animi molestias laudantium. Sint velit rem consequatur ullam odit ratione laborum
        minima!
        Praesentium rem similique id illo delectus voluptas unde vitae quia?</p>

   </div>

</body>
</html>

css文件：

.box1 {
  background-color: antiquewhite;
  color: royalblue
}

网页效果：

上面这个两边顶着浏览器，修改一下样式

    <div class="container"> 
        <div class="box1">
            <h1>Hello world</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum debitis vel sapiente. At harum,
                libero voluptates eos porro id sint sapiente facere rerum recusandae ipsum? Ipsum et tempore quae voluptatum,
                culpa adipisci doloremque, quia minus perspiciatis dolorem dolore aspernatur velit cupiditate,
                eligendi facilis voluptate dignissimos maxime beatae libero doloribus delectus veniam sapiente!
                Earum ipsa assumenda recusandae deleniti necessitatibus autem eos consequuntur,
                officiis pariatur tempore nostrum quidem voluptates sint voluptate perferendis suscipit enim harum!
                At optio nesciunt aliquid est, animi molestias laudantium. Sint velit rem consequatur ullam odit ratione laborum
                minima!
                Praesentium rem similique id illo delectus voluptas unde vitae quia?
            </p>
        </div>
    </div>

.box1 {
  background-color: antiquewhite;
  color: royalblue;
}
.container {
  width: 80%;
  margin:auto;
}

CSS里的颜色

RGBA和HSLA中的A是alpha通道，表示不透明度参数

色相，饱和度，亮度

css颜色参考网站

① (★★★) ②

CSS字体

可通过font-family来属性来指定字体

Arial是字体族名

Arial，Helvetica放在一起表示，优先使用Arial，如果找不到Arial就使用Helvetica

sans-serif专指西文中没有衬线的字体，与汉字字体中的黑体相对应

serief是有衬线的字体

意思是在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。相反的，sans serif 就没有这些额外的装饰，而且笔画的粗细差不多。

monospace表示等宽字体

css字体参考网站

① (★★★) ② （统计了一些字体的占有率） ③（免费字体选用平台） ④ thetype.com

不断修改实例

<!DOCTYPE html>
<html lang="en">
    <haed>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0"
              <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
        <link rel="stylesheet" href="style.css">
        <title>CSS Crash Course</title>
    </haed>
    <body>
        <div class="container"> 

            <div class="box1">
                <h1>Hello world</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum debitis vel sapiente. At harum,
                    libero voluptates eos porro id sint sapiente facere rerum recusandae ipsum? Ipsum et tempore quae voluptatum,
                    culpa adipisci doloremque, quia minus perspiciatis dolorem dolore aspernatur velit cupiditate,
                    eligendi facilis voluptate dignissimos maxime beatae libero doloribus delectus veniam sapiente!
                    Earum ipsa assumenda recusandae deleniti necessitatibus autem eos consequuntur,
                    officiis pariatur tempore nostrum quidem voluptates sint voluptate perferendis suscipit enim harum!
                    At optio nesciunt aliquid est, animi molestias laudantium. Sint velit rem consequatur ullam odit ratione laborum
                    minima!
                    Praesentium rem similique id illo delectus voluptas unde vitae quia?
                </p>
            </div>

            <div class="box2">
                <h1>Hello world</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum debitis vel sapiente. At harum,
                    libero voluptates eos porro id sint sapiente facere rerum recusandae ipsum? Ipsum et tempore quae voluptatum,
                    culpa adipisci doloremque, quia minus perspiciatis dolorem dolore aspernatur velit cupiditate,
                    eligendi facilis voluptate dignissimos maxime beatae libero doloribus delectus veniam sapiente!
                    Earum ipsa assumenda recusandae deleniti necessitatibus autem eos consequuntur,
                    officiis pariatur tempore nostrum quidem voluptates sint voluptate perferendis suscipit enim harum!
                    At optio nesciunt aliquid est, animi molestias laudantium. Sint velit rem consequatur ullam odit ratione laborum
                    minima!
                    Praesentium rem similique id illo delectus voluptas unde vitae quia?
                </p>
            </div>

        </div>


    </body>
</html>

body {
    background-color: #f4f4f4;
    color: #555555
}
.box1 {
  background-color: antiquewhite;
  color: royalblue;
}
.container {
  width: 80%;
  margin:auto;
}

box2没有指定颜色，所以继承了body的颜色#555555

修改字体：

body {
  background-color: #f4f4f4;
  color: #555555;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
}

font-weight是字重，bold表示加粗正常是normal

还可以这样写：

body {
  background-color: #f4f4f4;
  color: #555555;
  font: normal 20px, Arial, Helvetica, sans-serif;
}

修改box1中的h1

.box1 h1 {
  font-family: "Times New Roman";
  font-weight: 800;
  font-style: italic;
  text-decoration: underline;
  text-transform: uppercase;
}

text-transform属性:用于控制文本的大小写

可以添加字词的间距

.box1 h1 {
  font-family: "Times New Roman";
  font-weight: 800;
  font-style: italic;
  text-decoration: underline;
  text-transform: uppercase;
  letter-spacing: 1em;
  word-spacing: 2em;
}

关于css中的em单位

更改行高

body {
  background-color: #f4f4f4;
  color: #555555;
  font: normal 20px, Arial, Helvetica, sans-serif;
  line-height: 2em;
}

line-height

四.盒子模型、CSS布局

box

content可以看成上下撑顶的文字或图片

border:边框可以指定颜色

padding：内边框 ,content和border之间的距离

margin：外边框

当很多box放在一起，margin会合并

外边距margin

p{
	margin:5px 10px 5px 10px ;
}
指定顺序为：上、右、下、左(顺时针)
p{
	margin:5px 10px ;
}
5px表示上下边距,10px表示左右边距

当上下边距一样,左右边距一样的时候，可以使用这种形式

若上下左右边距全都一样只要：margin:5px;即可
p{
	margin:5px 10px 5px;
}
这种形式是：上边距，左右边距，下边距

设置内边距只需要把margin换成padding即可

修改实例

CSS边框

修改box1的border

.box1 {
  background-color: antiquewhite;
  color: royalblue;
  border: 5px blue solid;
}

.box1 {
  background-color: antiquewhite;
  color: royalblue;
  border-right: 5px red solid;
  border-top: 10px green solid;
  border-bottom: 8px firebrick double;
  border-left: 20px orange dotted;
}

solid代表实线

border-bottom-width: 50px;

border-bottom-style: dashed;

修改内边距padding

.box1 {
  background-color: antiquewhite;
  color: royalblue;
  border-right: 5px red solid;
  border-top: 10px green solid;
  border-bottom: 8px firebrick double;
  border-left: 20px orange dotted;
  border-bottom-width: 50px;
  border-bottom-style: dashed;

  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

可是看不出变化，这时，打开调试工具，选中box1，查看

外边框margin
```
margin-top:50px;
```
这样子就不是顶着上边界了

修改box2样式

.box2 {
  border: 5px dotted #cccccc;
  border-radius: 50px;
  padding: 20px;
  margin: 20px 0px;
}

border-radius表示圆角

margin: 20px 0px;表示上下为20px，左右为0px

0px可以直接写为0

CSS列表

在container中加入如下：

        <div class="list">
            <ul>
                <li>ls 1</li>
                <li>ls 2</li>
                <li>ls 3</li>
                <li>ls 4</li>
                <li>ls 5</li>

            </ul>
        </div>

在css代码中加入如下：

.box2 h1 {
  text-align: center;
}
.list li {
  background-color: greenyellow;
  list-style-image: url("https://cdn.jsdelivr.net/gh/xin007-kong/picture_new/img/20210809080123.png");
}

记住每个后面都要加分号

这里安利两个平台：阿里巴巴图标库(海量图标)和figma(极方便图片处理操作)

css 列表还有很多自带样式：

list-style: square;

对应方块

默认的是圆形

list-style: none;

对应没有样式

CSS按钮

在box2里面加一个按钮

<div class="box2">
    <h1>Hello world</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum debitis vel sapiente. At harum,
        libero voluptates eos porro id sint sapiente facere rerum recusandae ipsum? 
    </p>
    <button>
        Button
    </button>
</div>

在CSS中加入：

button {
  background-color: #444444;
  color: #fff;
  padding: 10px 15px;
}
button:hover {
  background-color: red;
}
button:active {
  background-color: #fff;
}

鼠标悬停时：

CSS :hover 选择器

用于选择鼠标指针浮动在上面的元素,hover 选择器可用于所有元素，不只是链接

CSS: active 选择器

用于选择活动链接,当在一个链接上点击时，它就会成为活动的（激活的）

因为设置样式时直接用的button标签，所以如果在box1里面也放一个，那网页中会有同样的两个按钮

CSS链接

给列表里面添加超链接再添加样式

<div class="list">
    <ul>
        <li><a href="http://www.baidu.com/">ls 1</a></li>
        <li><a href="http://www.baidu.com/">ls 2</a></li>
        <li><a href="http://www.baidu.com/">ls 3</a></li>
        <li><a href="http://www.baidu.com/">ls 4</a></li>
        <li><a href="http://www.baidu.com/">ls 5</a></li>

    </ul>
</div>

CSS:

a {
  text-decoration: none;
  color: #555555;
}
a:hover {
  color: coral;
}
a:visited {
  color: purple;
}

第二张图把background-color改成white了，

访问过的链接就显示purple

CSS text-decoration 属性：

规定添加到文本的修饰

超链接原本默认有个下划线，设置为none就没有了

CSS :visited 选择器

用于选取已被访问的链接

CSS浮动

在box2中加入如下：

<div class="block">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Amet officiis tenetur pariatur nihil reiciendis fugit cum quas quisquam ducimus, error delectus 
        et consectetur suscipit voluptatibus veritatis numquam consequuntur est deleniti repudiandae nisi odit.
        Odio consequatur maiores, debitis et eaque consectetur numquam magni? Omnis, ea dolor. 
        Unde laudantium cum vel repellat!</p>
</div>

<div class="block">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Amet officiis tenetur pariatur nihil reiciendis fugit cum quas quisquam ducimus, error delectus
        et consectetur suscipit voluptatibus veritatis numquam consequuntur est deleniti repudiandae nisi odit.
        Odio consequatur maiores, debitis et eaque consectetur numquam magni? Omnis, ea以上是关于css入门的主要内容，如果未能解决你的问题，请参考以下文章 
 VSCode自定义代码片段7——CSS动画
 VSCode自定义代码片段7——CSS动画
 VSCode自定义代码片段6——CSS选择器
 css常用代码片段 (更新中)
 CSS代码片段
 CSS代码片段