🐷CSS是什么

css是啥呢?

英文是Cascading Style Sheets

叫做层叠样式表

一个前端页面如果只有HTML就会很单调,很丑,CSS就像一个化妆师,美化前端页面的元素,实现页面的样式和结构分离

🐷基本语法规范

来看看它的基本语法

选择器+{一条/N条声明}

选择器是针对谁来进行修改的
声明是修改啥
声明的属性是键值对分号区分键值对,冒号区分键和值

CSS 要写到 style 标签中(后面还会介绍其他写法)

style 标签可以放到页面任意位置. 一般放到 head 标签内.

CSS 使用 /* */ 作为注释. (使用 ctrl + / 快速切换)

<!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>
        p {
        /* 设置字体颜色 */
        color: red;
        /* 设置字体大小 */
        font-size: 30px;
        }
        </style>
        <p>hello</p>
</head>
<body>
</body>
</html>

看看执行结果

🐷CSS引入方式

🥝内部样式

写在 style 标签中. 嵌入到 html 内部.

理论上来说 style 放到 html 的哪里都行. 但是一般都是放到 head 标签中,但是也可以不放到head里面,可以看到hello在head标签里面,而WYBYYDS不在head标签里面

<!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>
        p {
        /* 设置字体颜色 */
        color: red;
        /* 设置字体大小 */
        font-size: 30px;
        }
        </style>
        <p>hello</p>
</head>
<body>
    <style>
        div{
            font-size: 50px;
            color: green;
        }
    </style>
    <div>WYB YYDS</div>
</body>
</html>

优点: 这样做能够让样式和页面结构分离. 缺点: 分离的还不够彻底. 尤其是 css 内容多的时候

🥝外部样式

通过link标签,把CSS文件引入进来

如下图

🥝内联样式

<div style="color: blue;font-size: 50px;">WHY BBD</div>
• 1

看效果图

我们在开发中一般用内部样式

🐷认识选择器

🍉标签选择器

使用标签名,把页面的所有同名标签都选中

缺点:太宽泛,没有针对性

🍉类选择器

CSS中创建一个类名,这个类名对应一组css属性

这里的类名和Java没关系,一个标签可以引入多个类名,多个类名使用空格分割

一个类名可以被多个标签引用

类选择器是最常用,功能最丰富的选择器

 <div class="one">hhhhh</div>

结果如下:

🍉id选择器

一个HTML页面的标签可以有一个id属性,这个属性的值.作为标签的身份标识

是唯一的

CSS 中使用 # 开头表示 id 选择器

id 选择器的值和 html 中某个元素的 id 值相同

html 的元素 id 不必带 #

id 是唯一的, 不能被多个标签使用 (是和类选择器最大的区别)

<style>
#ha {
color: red;
}
</style>
<div id="ha">哈哈哈</div>

🍉复合选择器(后代选择器)

复合选择器有很多,我们这里介绍后代选择器

效果就是把上述的的三种基础选择器进行组合,体现标签的层次结构

又叫包含选择器. 选择某个父元素中的某个子元素

元素 1 和元素 2 要使用空格分割

元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1

 <ul>
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
 </ul>
 <ol>
            <li>ddd</li>
            <li>eee</li>
            <li>fff</li>
 </ol>
            <style>
                ol li {
                color: red;
                }
            </style>

就像这个,父级元素是上面的三个字母,选中子元素修改不影响父元素

🐷CSS常见属性

🧊字体属性

 .one{
    font-size: 50px;
    color: blueviolet;
    font-family: '微软雅黑';
    font-weight: 900;
    /* 字体样式是斜体 */
    font-style: italic;
 }

🧊文本属性

<div class="two">你好,我是来自未来的哆啦A梦</div>
• 1

看结果

颜色也可以用rgb的方式来表示

🧊背景属性

background-color设置背景颜色,写法和color一样

background-image设置背景图片

background-position 设置背景图的位置

background-size 设置背景大小

具体实现详见博客系统前端代码

🧊圆角矩形

通过 border-radius 使边框带圆角效果.

<div>蛤蛤</div>
  <style>
        div {
    width: 200px;   
    height: 100px;
    border: 2px solid green;
    border-radius: 10px;
}
    </style>

结果就是这样的

要是想让边框变成圆形,让border-radius的值变为宽度的一半

 <style>
        div {
    width: 200px;   
    height: 200px;
    border: 2px solid green;
    border-radius: 100px;
    /* 或者用50%也可以 */
    border-radius: 50%;
}

🐷Chrome 调试工具 – 查看 CSS 属性

打开网页,单击鼠标右键点解检查,或者Ctrl+f12,也可以打开

选择页面的某个元素,点击,就可以看到这个元素对应的前端代码

elements 查看标签结构

console 查看控制台

source 查看源码+断点调试

network 查看前后端交互过程

application 查看浏览器提供的一些扩展功能(比如本地存储)

这里多点开看看,就熟悉了

🐷元素显示模式

🌻块级元素

h1 - h6

p

div

ul

ol

li

独占一行高度, 宽度, 内外边距, 行高都可以设置

宽度默认是父级元素宽度的 100% (和父元素一样宽) 是一个容器(盒子)

里面可以放行内和块级元素.

display:block块级元素

元素

🌻行级元素

display:inline 行内元素

a

strong

b

em

i

del

s

ins

u

span

不独占一行, 一行可以显示多个

设置高度, 宽度, 行高无效左右外边距有效(上下无效).

内边距有效. 默认宽度就是本身的内容

行内元素只能容纳文本和其他行内元素, 不能放块级元素

display:none 实现元素隐藏的效果

🌻盒模型

一个HTML元素就是一个矩形

一个HTML元素由内容+内边框+边框+外边框构成

🌻弹性布局

对于块级元素,默认是独占一行的(垂直方向排列)

如果想让块级元素水平排列,采用弹性布局的方式,使用行内元素可以水平排列,但是不能设置尺寸啊!

1.开启弹性布局:display: flex;

flex就是古弹性布局的意思某个元素一旦开启弹性布局,此时内部的子元素,就会按照水平方向排列,子元素的子元素不受影响

2.justify-content:设置水平方向的排列规则居中排列,靠左,靠右,分散开等形式

3.align-items 设置垂直方向的排列规则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        </div>
        <style>
        div {
        width: 100%;
        height: 150px;
        background-color: red;
        }
        div span {
        background-color: green;
        width: 100px;
        }
        </style>
</body>
</html>

当我们给 div 加上 display:flex 之后, 效果为

此时看到, span 有了高度, 不再是 "行内元素了

再给 div 加上 justify-content: space-around; 此时效果为

把 justify-content: space-around; 改为 justify-content: flex-end; 可以看到此时三个元素在右侧显示了.

代码给大家看一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        </div>
        <style>
        div {
        width: 100%;
        height: 150px;
        background-color: red;
        display: flex;
        justify-content: flex-end
        }
        div span {
        background-color: green;
        width: 100px;
        }
        </style>
</body>
</html>

今天的讲解就到这里,我们下期再见了,886~~~

认识CSS