概念
基本语法规范
引入样式
代码风格
选择器
常用元素属性
盒模型
弹性布局
- - flex 布局基本概念
  - - 常用属性
    - - justify-content
      - align-items

概念

我们这里还是在html里面敲,当然,我这里只是简单的CSS操作,如果想更深入的了解,里面还有很多很多东西…

基本语法规范

选择器+应用的属性
我们这里放在 HTML 文件中(CSS代码通常放在style标签里,style标签可以放到 HTML 的任意位置)

<body>
   <style>
       p{
           /* 设置字体颜色 */
           color: pink;
           /* 设置字体大小 */
           font-size: 30px;
       }
   </style>
   <p>
       hello
   </p>
</body>

在这里插入图片描述

引入样式

内部样式表

写在style标签中,嵌入到html内部,这个不太常见,写一些简单的CSS还是可以…

<p>
    <style>
        p{
            /* 设置字体颜色 */
            color: red;
            /* 设置字体大小 */
            font-size: 30px;
        }
    </style>
       hello
   </p>

在这里插入图片描述

内联样式

通过html 标签中的style 属性,来应用一些样式,他只是针对当前元素生效

<p style="color: red;">hello world !</p>

在这里插入图片描述

外部样式

在这里插入图片描述

代码风格

1:紧凑风格

p{ color: red; font-size: 30px;}

2展示风格(推荐)

p {
color: red;
font-size: 30px;
}

样式大小写
虽然CSS他不区分大小写,但是我们还是推荐使用小写字母
空格规范
冒号后面带空格,选择器和 { 之间也有一个空格…

选择器

选择器的功能
就是选中页面的元素(标签),可以一次选一个,也可以一次选一批

选择器种类

基础选择器

他是单个选择器构成的

标签选择器

<style>
     p{
         color: red;
     }
  </style>

这是针对所有的 p 都会生效

类选择器

<style>
      /* 开头的这个就是 css 中的类名 */
     .red{
         color: red;
     }
     .green{
         color: green;
     }
  </style>
 <!-- class 对应相关的css类 -->
<p class="red">  
    hello
</p>
<p class="green">
    world
</p>
<p>
    你好!
</p>

在这里插入图片描述

id选择器

先给被选中的元素,设定一个id属性(id在一个页面中,不能重复),因此,id选择器只能选中一个元素,不能选中多个…

<style>
/* #开头 */
        #ch{
            color: blue;
        }
    </style>
    <p id="ch">
        hello world;
    </p>
    <p>
        hello world;
    </p>

在这里插入图片描述

通配符选择器

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    </style>

复合选择器

后代选择器

通过多个选择器的组合,能够选中某个元素里面的子/孙子元素(后代元素)

在这里插入图片描述
可以是儿子:

<style>
    ol li {
color: red;
}
</style>

    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        </ul>
        <ol>
        <li>ddd</li>
        <li>eee</li>
        <li>fff</li>
        </ol>

在这里插入图片描述
ul 和 ol里面的互不影响
也可以是孙子:

<style>
    ol li a{
color: red;
}
</style>
        <ol>
        <li>ddd</li>
        <li>eee</li>
        <li><a href="#">fff</a></li>
        </ol>

或者style里面也可以这样写:

<style>
    ol a{
color: red;
}
</style>

在这里插入图片描述
搭配类选择器:
找ol 标签里面是否有class为name的元素

<style>
    ol .name{
color: red;
}
</style>
        <ol>
        <li class="name">ddd</li>
        <li class="name">eee</li>
        <li>fff</li>
        </ol>

        <ol>
            <li>hhh</li>
        </ol>

在这里插入图片描述注意ol 和 .name之间是有空格的

子选择器

通过多个选择器的组合,能够选中某个元素里面的子元素

元素1>元素2 { 样式声明 }
使用大号分割,只选亲儿子,不选孙子

 <style>
        ul>.name{
            color: red;
        }
    </style>
    <ul>
        <li class="name">hhh</li>
        <li>bbb</li>
        <li class="name"><a href="#">aaa</a></li>
    </ul>

在这里插入图片描述

<style>
        ul>li{
            color: red;
        }
    </style>
    <ul>
        <li>hhh</li>
        <li>bbb</li>
        <li><a href="#">aaa</a></li>
    </ul>

在这里插入图片描述

并集选择器

元素1, 元素2 { 样式声明 }
并列的写多个选择器,中间使用逗号来分割…

<style>
        ul>li,ol>li{
            color: red;
        }
    </style>

    <ul>
        <li>hahah</li>
        <li>bbaba</li>
        <li><a href="#">qqqq</a></li>
    </ul>

    <ol>
        <li>hahah</li>
        <li>bbaba</li>
        <li><a href="#">qqqq</a></li>
    </ol>

在这里插入图片描述

伪类选择器

1)链接伪类选择器

<style>
   a:link {
color: black;
/* 去掉 a 标签的下划线 */
text-decoration: none;
} a:visited {
color: green;
} a:hover {
color: red;
} a:active {
color: blue;
} 
</style>


    <a href="#">小猫</a>

:force 伪类选择器
选取获取焦点的 input 表单元素

<style>
   .three>input:focus {
color: red;
} 
</style>
    <div class="three">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
        </div>

此时被选中的表单的字体就会变成红色

复合选择器小结

选择器	作用	注意事项
后代选择器	选择后代元素	可以是孙子元素
子选择器	选择子元素	只能选亲儿子,不能选孙子
并集选择器	选择相同样式的元素	更好的做到代码重用
链接伪类选择器	选择不同状态的链接	重点掌握a:hover 的写法
:focuse 伪类选择器	选择被选中的元素	重点掌握 input:focus

常用元素属性

css 属性有很多,可以参考以下文档
直达车

不需要背,要用的时候看一下就好了

字体属性

<style>
body {
font-family: '微软雅黑';
font-family: 'Microsoft YaHei';
}
</style>

<style>
.font-family .one {
font-family: 'Microsoft YaHei';
}
.font-family .two {
font-family: '宋体';
}
</style>
<div class="font-family">
<div class="one">
这是微软雅黑
</div>
<div class="two">
这是宋体
</div>
</div>

在这里插入图片描述

大小:

p{
font-size: 20px;
}

<style>
.font-size .one {
font-size: 40px;
}
.font-size .two {
font-size: 20px;
}
</style>
<div class="font-size">
<div class="one">
大大大
</div>
<div class="two">
小小小
</div>
</div>

在这里插入图片描述

粗细:

p {
font-weight: bold;
font-weight: 700;
}

<style>
.font-weight .one {
font-weight: 900;
}
.font-weight .two {
font-weight: 100;
}
</style>
<div class="font-weight">
<div class="one">
粗粗粗
</div>
<div class="two">
细细细
</div>
</div>

在这里插入图片描述

文字样式:

/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;

<style>
.font-style em {
font-style: normal;
}
.font-style div {
font-style: italic;
}
</style>
<div class="font-style">
<em>
放假啦
</em>
<div class="one">
放假了
</div>
</div>

在这里插入图片描述

文本属性

文本颜色:
认识RGB

设置文本颜色

color: red;
color: #00ff00;
color: rgb(0,0,255);

十六进制形式表示颜色, 如果两两相同, 就可以用一个来表示 :#ff00ff => #f0f

<style>
.one {
            color: red;
        }
        .two {
            color: #00ff00;
        }
        .three {
            color: rgb(0,0,255);
        }
</style>
<div class="one">hello</div>
<div class="two">hello</div>
<div class="three">hello</div>

在这里插入图片描述

文本对齐:
控制文字水平方向的对齐

text-align: [值];

<style>
.text-align .one {
text-align: left;
}
.text-align .two {
text-align: right;
}
.text-align .three {
text-align: center;
}
</style>
<div class="text-align">
<div class="one">左对齐</div>
<div class="two">右对齐</div>
<div class="three">居中对齐</div>
</div>

在这里插入图片描述

文本装饰:

text-decoration: [值];

<style>
.text-decorate .one {
text-decoration: none;
}
.text-decorate .two {
text-decoration: underline;
}
.text-decorate .three {
text-decoration: overline;
}
.text-decorate .four {
text-decoration: line-through;
}
</style>
<div class="text-decorate">
<div class="one">啥都没有</div>
<div class="two">下划线</div>
<div class="three">上划线</div>
<div class="four">删除线</div>
</div>

在这里插入图片描述

文本缩进:
控制段落的首行缩进 (其他行不影响)

text-indent: [值];

<style>
.text-indent .one {
text-indent: 2em;
}
.text-indent .two {
text-indent: -2em;
}
</style>
<div class="text-indent">
<div class="one">正常缩进</div>
<div class="two">反向缩进</div>
</div>

在这里插入图片描述

行高:

行高指的是上下文本行之间的基线距离

内容区：底线和顶线包裹的区域，即下图深灰色背景区域
在这里插入图片描述

line-height: [值];

注意1: 行高 = 上边距 + 下边距 + 字体大小

<style>
.line-height .one {
line-height: 40px;
font-size: 16px;
}
</style>
<div class="line-height">
<div>
上一行
</div>
<div class="one">
中间行
</div>
<div>
下一行
</div>
</div>

在这里插入图片描述

注意2: 行高也可以取 normal 等值

注意3:行高等与元素高度, 就可以实现文字居中对齐

<style>
.line-height .two {
height: 100px;
line-height: 100px;
}
</style>
<div class="line-height">
<div class="two">
文本垂直居中
</div>
</div>

在这里插入图片描述

背景属性

背景颜色:

background-color: [指定颜色]

<style>
body {
background-color: #f3f3f3;
}
.bgc .one {
background-color: red;
}
.bgc .two {
background-color: #0f0;
}
.bgc .three {
/* 背景透明 */
background-color: transparent;
}
</style>
<div class="bgc">
<div class="one">红色背景</div>
<div class="two">绿色背景</div>
<div class="three">透明背景</div>
</div>

在这里插入图片描述

背景图片:

background-image: url(...);

比 image 更方便控制位置(图片在盒子中的位置)

<style>
        .bgi .one {
        background-image: url(小狗.png);
        height: 1000px;
        }
        </style>
        <div class="bgi">
        <div class="one">背景图片</div>
        </div>

在这里插入图片描述

背景平铺

background-repeat: [平铺方式]

默认是 repeat

<style>
        .bgr .one {
        background-image: url(小狗.png);
        height: 300px;
        background-repeat: no-repeat;
        }
        .bgr .two {
        background-image: url(小狗.png);
        height: 300px;
        background-repeat: repeat-x;
        }
        .bgr .three {
        background-image: url(小狗.png);
        height: 1000px;
        background-repeat: repeat-y;
        }
        </style>
        <div class="bgr">
        <div class="one">不平铺</div>
        <div class="two">水平平铺</div>
        <div class="three">垂直平铺</div>
        </div>

在这里插入图片描述
背景位置:

background-position: x y;

修改图片的位置

<style>
        .bgp .one {
        background-image: url(小狗.png);
        height: 500px;
        background-repeat: no-repeat;
        background-color: purple;
        background-position: center;
        }
        </style>
        <div class="bgp">
        <div class="one">背景居中</div>
        </div>

在这里插入图片描述

背景尺寸:

background-size: length|percentage|cover|contain;

<style>
        .one {
            background-image: url(小狗.png);
            height: 300px;
            background-size: 50px;
        }
        .two{
            background-image: url(小狗.png);
            height: 300px;
            background-size: 50%;
        }
        .three{
            background-image: url(小狗.png);
            height: 300px;
            background-size:cover
        }
        .four{
            background-image: url(小狗.png);
            height: 300px;
            background-size: contain;
        }
    </style>
    <div class="one">小狗</div>
    <div class="two">小狗</div>
    <div class="three">小狗</div>
    <div class="four">小狗</div>

在这里插入图片描述

圆角矩形

基本用法

border-radius: length;

length 是内切圆的半径. 数值越大, 弧线越强烈

<style>
        div { 
            font-size: 100px;
            width: 500px;
            height: 300px;
            border: 2px solid red;
            border-radius: 20px;
        }
    </style>
    <div>hello</div>

在这里插入图片描述

生成圆形:
让 border-radius 的值为正方形宽度的一半即可

 <style>
div {
        width: 200px;
        height: 200px;
        border: 2px solid green;
        border-radius: 100px;
        /* 或者用 50% 表示宽度的一半 */
        border-radius: 50%;
        }
    </style>
    <div>hello</div>

在这里插入图片描述

生成圆角矩形:
让 border-radius 的值为矩形高度的一半即可

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

在这里插入图片描述

元素显示模式

块级元素

<style>
.demo1 .parent {
width: 500px;
height: 500px;
background-color: green;
}
.demo1 .child {
/* 不写 width, 默认和父元素一样宽 */
/* 不写 height, 默认为 0 (看不到了) */
height: 200px;
background-color: red;
}
</style>
<div class="demo1">
    <div class="parent">
    <div class="child">
    child1
    </div>
    <div class="child">
    child2
    </div>
    </div>
    </div>

在这里插入图片描述

注意:

文字类的元素内不能使用块级元素
p 标签主要用于存放文字, 内部不能放块级元素, 尤其是 div

行内元素/内联元素

<style>
        .demo2 span {
        width: 200px;
        height: 200px;
        background-color: red;
        }
        </style>
        <div class="demo2">
        <span>child1</span>
        <span>child2</span>
        <span>child3</span>
        </div>

在这里插入图片描述
注意:

盒模型

每一个 HTML 元素就相当于是一个矩形的 “盒子”

在这里插入图片描述

边框:
基础属性

 <style>
        div {
width: 500px;
height: 250px;
border-width: 10px;
border-style: solid;
border-color: green;
}
    </style>
    <div>hello</div>

在这里插入图片描述

支持简写, 没有顺序要求

可以改四个方向的任意边框

边框会撑大盒子
在这里插入图片描述设置的是500px 跟 250px

内边距

padding 设置内容和边框之间的距离

基础语法

  <style>
      div {
height: 200px;
width: 300px;

}
    </style>
    <div>hello</div>

在这里插入图片描述

加上padding后:

<style>
        div {
height: 200px;
width: 300px;
padding-top: 5px;
padding-left: 10px;
}
      
    </style>
    <div>hello</div>

在这里插入图片描述

此时可以看到带有了一个绿色的内边距

复合写法

可以把多个方向的 padding 合并到一起. [四种情况都要记住, 都很常见]

控制台中选中元素, 查看右下角, 是很清楚的
在这里插入图片描述

外边距

基础写法

<style>
        div {
background-color: red;
width: 200px;
height: 200px;
}
.first {
margin-bottom: 20px;
}

      
    </style>
    <div class="first">hello</div>
    <div>world</div>

在这里插入图片描述

复合写法

块级元素水平居中

前提:
指定宽度(如果不指定宽度, 默认和父元素一致)
把水平 margin 设为 auto

 <style>
       div {
width: 500px;
height: 200px;
background-color: red;
margin: 0 auto;
}


      
    </style>
    <div>world</div>

在这里插入图片描述

弹性布局

 <style>
div {
width: 100%;
height: 150px;
background-color: red;
}
div>span {
background-color: green;
width: 100px;
}   
    </style>
     <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        </div>

在这里插入图片描述
当我们给 div 加上 display:flex 之后, 效果为

div {
width: 100%;
height: 150px;
background-color: red;
display:flex;
}
div>span {
background-color: green;
width: 100px;
}   
    </style>
     <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        </div>

在这里插入图片描述

此时看到, span 有了高度, 不再是 “行内元素了”
再给 div 加上 justify-content: space-around; 此时效果为:

 <style>
div {
width: 100%;
height: 150px;
background-color: red;
display:flex;
justify-content: space-around;
}
div>span {
background-color: green;
width: 100px;
}   
    </style>
     <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        </div>

在这里插入图片描述

此时可以看到这些 span 已经能够水平隔开了.
把 justify-content: space-around; 改为 justify-content: flex-end; 可以看到此时三个元素在右侧显示了:

   <style>
div {
width: 100%;
height: 150px;
background-color: red;
display:flex;
justify-content: flex-end;
}
div>span {
background-color: green;
width: 100px;
}   
    </style>
     <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        </div>

在这里插入图片描述

flex 布局基本概念

常用属性

justify-content

设置主轴上的子元素排列方式.

值	描述
flex-start	默认值,项目位于容器的开头
flex-end	项目位于容器的结尾
center	项目位于容器中央
space-between	项目在行与行之间留有间隔
space-around	项目在行之前,行之间和行之后留有空间

示例

<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<style>
div {
width: 100%;
height: 150px;
background-color: red;
display: flex;
}
div span {
width: 100px;
height: 100px;
background-color: green;
}
</style>

<div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        </div>
        <style>
        div {
        width: 100%;
        height: 150px;
        background-color: red;
        display: flex;
        justify-content: flex-end;
        }
        div span {
        width: 100px;
        height: 100px;
        background-color: green;
        }
        </style>

在这里插入图片描述

 <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        </div>
        <style>
        div {
        width: 100%;
        height: 150px;
        background-color: red;
        display: flex;
        
        justify-content: center;
        }
        div span {
        width: 100px;
        height: 100px;
        background-color: green;
        }
        </style>

在这里插入图片描述

<div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        </div>
        <style>
        div {
        width: 100%;
        height: 150px;
        background-color: red;
        display: flex;
        
        justify-content: space-around;
        }
        div span {
        width: 100px;
        height: 100px;
        background-color: green;
        }
        </style>

在这里插入图片描述

<div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        </div>
        <style>
        div {
        width: 100%;
        height: 150px;
        background-color: red;
        display: flex;
        
        justify-content: space-between;
        }
        div span {
        width: 100px;
        height: 100px;
        background-color: green;
        }
        </style>

在这里插入图片描述

align-items

设置侧轴上的元素排列方式

值	描述
stretch	默认值,行拉伸以占据剩余空间
center	朝着弹性容器的中央对行打包
flex-start	朝着弹性容器的开头对行打包
flex-end	朝着弹性容器的结尾对行打包
space-between	行均匀分布在弹性容器上
space-around	行均匀分布在弹性容器中,两端各占一半

取值和 justify-content 差不多.
理解 stretch(拉伸):
这个是 align-content 的默认值. 意思是如果子元素没有被显式指定高度, 那么就会填充满父元素的高度.

示范

<div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        </div>
        <style>
        div {
        width: 500px;
        height: 500px;
        background-color: green;
display: flex;
justify-content: space-around;
}
div span {
width: 150px;
background-color: red;
}
</style>

在这里插入图片描述

<div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        </div>
        <style>
        div {
        width: 500px;
        height: 500px;
        background-color: green;
        display: flex;
        justify-content: space-around;
        align-items: center;
        }
        div span {
        width: 150px;
        height: 100px;
        background-color: red;
        }
        </style>

在这里插入图片描述
注意:

导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于弹性布局, 实现典型的页面结构</title>
</head>
<body>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .nav {
            width: 100%;
            height: 50px;
            background-color: rgb(216, 88, 88);
            color: white;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
        }

        .container {
            width: 100%;
            height: 1000px;

            background-color: rgb(240, 203, 203);

            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container .left, .container .right {
            width: 20%;
            height: 100%;

            background-color: rgb(162, 230, 162);

            font-size: 20px;
            line-height: 1000px;
            text-align: center;
            color:white;
        }

        .container .content {
            width: 60%;
            height: 100%;
            
            background-color: rgb(234, 116, 116);

            font-size: 20px;
            line-height: 1000px;
            text-align: center;
            color:white;
        }

        .footer {
            width: 100%;
            height: 150px;
            background-color: rgb(60,60,60);
            color: white;
            
            font-size: 20px;
            text-align: center;
            line-height: 150px;
        }

    </style>

    <div class="nav">
        导航栏
    </div>
    <div class="container">
        <div class="left">
            左侧边栏
        </div>
        <div class="content">
            内容
        </div>
        <div class="right">
            右侧边栏
        </div>
    </div>
    <div class="footer">
        页脚
    </div>

</body>
</html>