CSS基础

北冥有鱼-.2023-11-03 10:39

文章目录

CSS

css 基本语法结构

选择器 + 若干属性声明

一个简单的测试

html 复制代码 
<body>
    <p>
        这是一个段落
    </p>
    <!-- style标签可以放到任何位置 -->
    <style>
        p {
            color: red;
        }
    </style>

这个{ } 里面的 CSS 属性, 是可以写一个或多个

每个属性都是一个键值对, 键和值之间使用 : 分割,

键值对之间使用 ; 分割

每个键值对可以独占一行, 也可以不独占

三种写 CSS 的方式

  1. 使用 style 便签, 直接把 CSS 写到 html 文件中的.此时的 style 标签可以放到任何位置, 一般建议放到 head 标签里.
  2. 内联样式: 使用 style 属性, 针对指定的元素设置样式. (此时不需要写选择器, 直接写属性键值对), 这个时候只是针对当前元素生效.
  3. 外部样式: 把 css 代码单独作为一个 .css 文件, 再让 html 引入该css文件

在实际开发中, 一般都是使用外部样式来写css, 让 html 和 css 分离开

CSS 选择器

  1. 标签选择器
    在{ } 前面写便签名字, 此时意味着会选中所有的指定便签
html 复制代码 
<body>
    <style>
        p {
            color: blue;
            font: 40px;
        }
    </style>
    <p >
        这是一个段落
    </p>
    <p>
        这是另一个段落
    </p>   
    <div>
        这是一个div
    </div>
</body>
  1. 类选择器

更好的选择, 可以创建 CSS 类, 手动指定哪些元素应用这个类

html 复制代码 
<style>
        /* 此处定义了一个 CSS 类, 名字就叫做 one , CSS 类定义的时候需要使用. 开头 */
        .one {
            color:red;
        }
        .two {
            color:blue
        }
        .thread {
            color: black;
        }
        .four {
            color: blueviolet;
        }

    </style>
    <div class="one">
        这是第一个div
    </div>
    <div class="two">
        这是第二个div
    </div>
    <div class="thread">
        这是第三个div
    </div>
    <div class="four">
        这是第四个div
    </div>

定义类需要使用 . 开头
引用这个类的时候, 通过 class 属性 = "类名" 即可, 不需要带.

一个元素可以引用多个类

html 复制代码 
<style>
        /* 此处定义了一个 CSS 类, 名字就叫做 one , CSS 类定义的时候需要使用. 开头 */
        .one {
            color:red;
        }
        .two {
            color:blue
        }
        .thread {
            color: black;
        }
        .four {
            color: blueviolet;
        }
        .five {
            font-size: 50px;
        }
    </style>
    <div class="one five">
        这是第一个div
    </div>
    <div class="two">
        这是第二个div
    </div>
    <div class="thread">
        这是第三个div
    </div>
    <div class="four">
        这是第四个div
    </div>
  1. ID 选择器

html 页面中的每个元素, 都是可以设置一个唯一的id, 作为元素的身份标识, 给元素安培 id 后, 就可以通过 id 来选中对应的元素了.

html 复制代码 
<style>
        #oneDiv{
            color: red;
        }
    </style>

    <div id="oneDiv">
        这是一个div
    </div>
    <div id="twoDiv">
        这是一个div
    </div>

类选择器, 是可以让多个元素对应同一个类

id 选择器, 则只能针对唯一的元素生效, 因为在一个页面中, 只能又唯一的id

  1. 后代选择器
    把多个简单的基础选择器, 组合一下. (可以是便签, 类, id 选择器的任意组合)
html 复制代码 
<style>
        ul li {
            color: blue;
        }
    </style>

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

先找页面中所有的ul. 然后在这些 ul 里找所有的 li

只要是 ul 的后代即可 , 不一定非的是"子元素"

html 复制代码 
 <style>
        .one li {
            color: blue;
        }
    </style>

    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ol>
    <ul class="one">
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ul>
  1. 子选择器

这个也是把简单多个的基础选择器组合(标签, 类, id选择器),只是找匹配的子元素, 不找孙子元素之类的.

html 复制代码 
 <style>
        .one>li {
            color: red;
        }
    </style>

    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ol>
    <ul class="one">
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ul>

这个就是只在 .one 的子元素里面找 li 标签

html 复制代码 
<style>
    .one a {
        color: red;
    }
   </style>

    <div class="one">
        <a href="#">链接1</a>
        <p>
            <a href="#">链接2</a>
        </p>
    </div>
html 复制代码 
<style>
    .one>a {
        color: blue;
    }
   </style>

    <div class="one">
        <a href="#">链接1</a>
        <p>
            <a href="#">链接2</a>
        </p>
    </div>
  1. 并集选择器

选择器1, 选择器2 {

属性...

}

多组选择器, 应用同样的样式

html 复制代码 
   <style>
    /* .two {
        font-size: 40px;
    }
    .three {
        font-size: 40px;
    } */
    .two, .three {
        font-size: 40px;
    }

   </style>

    <div class="one">
        <a href="#" class="two">链接1</a>
        <p>
            <a href="#" class="three">链接2</a>
        </p>
    </div>
  1. 伪类选择器(复合选择器的特殊用法)

上面讲的选择器是选中某个元素

伪类选择器选中某个元素的某个特定状态

:hover 鼠标悬停时候的状态

:active 鼠标按下时候的状态

html 复制代码 
<style>
        .one:hover {
            color:green;
            font-size:70px;
        }
        .one:active {
            color: blueviolet;
            font-size: 90px;
        }
    </style>
    <div class="one">
        这是一个div
    </div>

鼠标指针放上后

点击后

字体属性

  1. 设置字体家族

font-family

html 复制代码 
<style>
        .one {
            font-size: 40px;
            font-family: '微软雅黑';
        }
        .two {
            font-size: 40px;
            font-family: '宋体';
        }
        .three {
            font-size: 40px;
            font-family: '黑体';
        }
        .four {
            font-size: 40px;
            font-family: '华文行楷';
        }
        
    </style>
    <div class="one">
        这是一个div
    </div>
    <div class="two">
        这是一个div
    </div>
    <div class="three">
        这是一个div
    </div>
    <div class="four">
        这是一个div
    </div>

这个属性指定的字体要求必须是系统已经安装了的.

  1. 设置文字大小

浏览器的每个文字, 可以视为是一个"方框"

如果是英文, 阿拉伯数字, 方框就比较宅, 如果是中文, 一般就是一个正方形

设置 font-size : 20px; 文字框的高度就是20px

  1. 文字粗细

font-weight 设置

html 复制代码 
<style>
        .one {
            font-size: 40px;
            font-family: '微软雅黑';
            font-weight: bolder;
        }
        .two {
            font-size: 40px;
            font-family: '宋体';
            font-weight: 700;
        }
        .three {
            font-size: 40px;
            font-family: '黑体';
            font-weight: 400;
        }
        .four {
            font-size: 40px;
            font-family:'华文行楷';
            font-weight: 200;
        }
        
    </style>
    <div class="one">
        这是一个div
    </div>
    <div class="two">
        这是一个div
    </div>
    <div class="three">
        这是一个div
    </div>
    <div class="four">
        这是一个div
    </div>
  • 700 == bold, 400 是不变粗==normal
  • 取值范围是 100 -> 900
  1. 设置倾斜
html 复制代码 
 font-style: italic;
  1. 文字颜色

color 属性

计算机是如何表示颜色呢?

红绿蓝三原色 等比例混合

计算机表示颜色一种典型方式:RGB的表示方式

在前端中, 每个分量都使用一个字节来表示

范围 0~255 (0 ~ 0xff)

  • 预定义的颜色值(直接是单词)
  • [最常用] 十六进制形式
  • RGB 方式

十六进制形式表示颜色, 如果两两相同, 就可以用一个来表示.

#ff00ff => #f0f

html 复制代码 
<style>
        .one {
            font-size: 40px;
            font-family: '微软雅黑';
            color: blue;
        }
        .two {
            font-size: 40px;
            font-family: '宋体';
            color: rgb(128,255,50);
        }
        .three {
            font-size: 40px;
            font-family: '黑体';
            color: #ff00ff;
        }
        .four {
            font-size: 40px;
            font-family:'华文行楷';
            color: #f0f;
        }
        
    </style>
    <div class="one">
        这是一个div
    </div>
    <div class="two">
        这是一个div
    </div>
    <div class="three">
        这是一个div
    </div>
    <div class="four">
        这是一个div
    </div>
  1. 文字对齐

靠左靠右居中

text-align 属性进行对齐

html 复制代码 
<style>
        .one {
            font-size: 40px;
            font-family: '微软雅黑';
            color: blue;
            text-align: left;
        }
        .two {
            font-size: 40px;
            font-family: '宋体';
            color: rgb(128,255,50);
        }
        .three {
            font-size: 40px;
            font-family: '黑体';
            color: #ff00ff;
            text-align: right;
        }
        .four {
            font-size: 40px;
            font-family:'华文行楷';
            color: #f0f;
            text-align: center;
        }
        
    </style>
    <div class="one">
        这是一个div
    </div>
    <div class="two">
        这是一个div
    </div>
    <div class="three">
        这是一个div
    </div>
    <div class="four">
        这是一个div
    </div>
  1. 文本装饰
html 复制代码 
text-decoration: [值];

常用取值:

  • underline 下划线. [常用]
  • none 啥都没有. 可以给 a 标签去掉下划线.
  • overline 上划线. [不常用]
  • line-through 删除线 [不常用]
html 复制代码 
<style>
        .one {
            font-size: 40px;
            font-family: '微软雅黑';
            color: blue;
            text-decoration: underline;
        }
        .two {
            font-size: 40px;
            font-family: '宋体';
            color: rgb(128,255,50);
            text-decoration: none;
        }
        .three {
            font-size: 40px;
            font-family: '黑体';
            color: #ff00ff;
            text-decoration: overline;
        }
        .four {
            font-size: 40px;
            font-family:'华文行楷';
            color: #f0f;
            text-decoration: line-through;
        }
        
    </style>
    <div class="one">
        这是一个div
    </div>
    <div class="two">
        这是一个div
    </div>
    <div class="three">
        这是一个div
    </div>
    <div class="four">
        这是一个div
    </div>
  1. 文本缩进
html 复制代码 
text-indent
html 复制代码 
<style>
        .one {
            font-size: 40px;
            font-family: '微软雅黑';
            color: blue;
            text-decoration: underline;
            text-indent: 20px;
        }
        .two {
            font-size: 40px;
            font-family: '宋体';
            color: rgb(128,255,50);
            text-decoration: none;
            text-indent: 60px;
        }
        .three {
            font-size: 40px;
            font-family: '黑体';
            color: #ff00ff;
            text-decoration: overline;
            text-indent: 80px;
        }
        .four {
            font-size: 40px;
            font-family:'华文行楷';
            color: #f0f;
            text-decoration: line-through;
            text-indent: 100px;
      
        }
        
    </style>
    <div class="one">
        这是一个div
    </div>
    <div class="two">
        这是一个div
    </div>
    <div class="three">
        这是一个div
    </div>
    <div class="four">
        这是一个div
    </div>

但是在开发中, 往往很少用 px 来进行缩进, 因为px是个绝对的值.

em 则是一个相对的量, 是以文字尺寸为基础来设置的.

假如文字大小为 40px

1em => 40px

2em => 80px

0.5em => 20px

文本缩进的值可以是负数(往左缩进)

  1. 行号
    行高 = 文字高度 + 行间距

HTML 中展示文字涉及到这几个基准线:

  • 顶线
  • 中线
  • 基线 (相当于英语四线格的倒数第二条线)
  • 底线

内容区：底线和顶线包裹的区域，即下图深灰色背景区域

html 复制代码 
<style>
        .one {
            font-size: 40px;
            font-family: '微软雅黑';
            color: blue;
            text-decoration: underline;
            line-height: 2em;
        }
        .two {
            font-size: 40px;
            font-family: '宋体';
            color: rgb(128,255,50);
            text-decoration: none;
            text-indent: 0.5em;
            line-height: 3em;

        }
        .three {
            font-size: 40px;
            font-family: '黑体';
            color: #ff00ff;
            text-decoration: overline;
            text-indent: 2em;
            line-height: 4em;

        }
        .four {
            font-size: 40px;
            font-family:'华文行楷';
            color: #f0f;
            text-decoration: line-through;
            text-indent: 4em;
            line-height: 20px;
        }
        
    </style>
    <div class="one">
        这是一个div
    </div>
    <div class="two">
        这是一个div
    </div>
    <div class="three">
        这是一个div
    </div>
    <div class="four">
        这是一个div
    </div>

背景属性

  1. 背景颜色
  • background-color: [指定颜色]
  • 默认是 transparent (透明) 的. 可以通过设置颜色的方式修改
html 复制代码 
<style>
        .one {
            font-size: 40px;
            font-family: '微软雅黑';
            color: blue;
            text-decoration: underline;
            background-color: rgb(0,160,0);
        }
        .two {
            font-size: 40px;
            font-family: '宋体';
            color: rgb(128,255,50);
            text-decoration: none;
            background-color: rgb(160,0,0);


        }
        .three {
            font-size: 40px;
            font-family: '黑体';
            color: #ff00ff;
            background-color: rgb(0,0,160);


        }
        .four {
            font-size: 40px;
            font-family:'华文行楷';
            color: #f0f;
            background-color: rgb(50,0,50);

        }
        
    </style>
    <div class="one">
        这是一个div
    </div>
    <div class="two">
        这是一个div
    </div>
    <div class="three">
        这是一个div
    </div>
    <div class="four">
        这是一个div
    </div>
  1. 背景图片

background-image: url(...);

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

注意:

  1. url 不要遗漏.
  2. url 可以是绝对路径, 也可以是相对路径
  3. url 上可以加引号, 也可以不加.
html 复制代码 
/* background-color: #ff00ff; */
            background-image: url(xiangrikui.jpg);
            height: 2000px;
  1. 背景平铺
    background-repeat: [平铺方式]

重要取值:

  • repeat: 平铺
  • no-repeat: 不平铺
  • repeat-x: 水平平铺
  • repeat-y: 垂直平铺
  • 默认是 repeat.

如果不想平铺, 使用 background-repeat:none

禁止平铺之后, 图片就出现在左上角

我们也可以让图片居中

html 复制代码 
			background-repeat: no-repeat;
            /* 顶端居中 */
            background-position: top center;
            /* 水平垂直都居中 */
            background-position: center center;
             /* 右下角 */
            background-position: right bottom;
            /* 自定义位置 */
            background-position: 15 30;

自定义位置这个是根据计算机坐标的

  1. 背景尺寸

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

  • 可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
  • 也可以填百分比: 按照父元素的尺寸设置.
  • cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
  • contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域.

圆角矩形

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

html 元素默认都是一个一个的矩形

有时候需要表示"带有圆角"的矩形

html 复制代码 
<style>
        .one{
        width: 200px;
        height: 100px;
        background-color: orange;
        color: aquamarine;
        text-align: center;
        line-height: 100px;
        /* 矩形效果 */
        border-radius: 10px;
    }
    </style>
    <div class="one">
        这是一个div
    </div>

border-radius: length;

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

元素设置为正方形. 内切圆半径为高度一半就能把元素设置为圆形

网页上也有很多这样的应用

元素的显示模式

在 CSS 中, HTML 的标签的显示模式有很多.

此处只重点介绍两个:

  • 块级元素 display: block
  • 行内元素 display: inline

关于块级元素和行内元素的区别

  1. 块级元素会独占一行, 行内元素不独占一行
  2. 块级元素, 高度宽度, 内外边距都可以设置, 行内元素, 高度宽度行高无效, 内边距有效, 外边距有时候有效, 有时候无效
  3. 块级元素默认宽度是和父元素一样宽, 行内元素默认宽度是和里面的内容一样宽

CSS 盒子模型

描述了 html 元素的布局规则

任何一个 html 元素都是一个矩形的盒子, 盒子里可以放内容(可以使文本, 可以使其他元素)

边框

border 属性是直接设置了四个方向

还可以使用border-top/bottom/left/right

设置边框要设置三个方面

  1. 边框的粗细
  2. 边框的颜色
  3. 边框的风格(实线虚线...)
html 复制代码 
<style>
        .one{
        width: 200px;
        height: 100px;
        background-color: orange;
        color: aquamarine;
        text-align: center;
        line-height: 100px;
        /* 矩形效果 */
        /* border-radius: 10px; */
        /* solid 表示的就是实线 */
        border: 5px #6666 solid;

        /* 防止盒子被撑大 */
            box-sizing: border-box;
    }
    
    .two {
        width: 200px;
        height: 100px;
        background-color: orange;
        color: aquamarine;
        line-height: 100px;
        border: 5px #6666 dashed;

    }
    .three {
            width: 200px;
        height: 100px;
        background-color: orange;
        color: aquamarine;
        line-height: 100px;
        border: 5px #6666 dotted ;
    }
    </style>
    <div class="one">
        这是一个div
    </div>
    <br>
    <div class="two">
        这是一个div
    </div>
    <br>
    <div class="three">
        这是一个div
    </div>

内边距

padding: 10px; 表示4个方向都是 10px

padding: 10px 20px; 表示上下边距是10px, 左右边距是20px

padding: 10px 20px 30px 40px 分别表示上右下左(顺时针)的边距

外边距

外边距设置的是元素和元素之间的距离

margin: 10px; 四个方向都是 10 px

margin: 10px 20px; 表示上下外边距是10px, 左右外边距是20px

margin: 10px 20px 30px 40px 表示上右下左(顺时针)的外边距

margin 的特殊用法

margin-left 和 margin-right 设置为 auto (让浏览器自动调节)

这样就能使 该元素在父元素内部居中放置(此处限于水平方向)

html 复制代码 
 </div> -->
    <style>
        .one{
        width: 200px;
        height: 100px;
        background-color: orange;
        color: aquamarine;
        text-align: center;
        line-height: 100px;
        border: 5px #6666 solid;
        /* 防止盒子被撑大 */
        box-sizing: border-box;
        padding:  10px;
        margin: ;
    }
    .three {
         width: 50px;   
         height: 50px;
         background-color: red;
         margin-left: auto;
         margin-right:  auto;

        }
    </style>
    <div class="one">
        
        <div class="three">
           
        </div>
    </div>

弹性布局

弹性布局是用来实现页面布局的(控制某个指定元素)

行内元素虽然是在水平方向上排列的, 但是不适合进行水平布局, 因为尺寸边距啥的不好控

  1. 开启弹性布局
html 复制代码 
 display: flex;

给要水平排列的元素的父元素, 设置flex

html 复制代码 
<style>
        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>

此时, 弹性容器里面的元素, 则不在是"块级" "行内元素", 而是成了弹性元素, 是遵守弹性布局的, 可以设置尺寸和边框了

  1. 设置这些元素的水平方向的排列方式

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

把 justify-content: space-around; 改为 justify-content: flex-end; 可以看到此时三个元素在

右侧显示了

设置 jutify-content: center , 此时元素居中排列

平分了剩余空间.

设置 justify-content: space-between;

先两边元素贴近边缘, 再平分剩余空间.

  1. 设置元素垂直方向的排列方式
    align-items:
html 复制代码 
<style>
        div{
            width: 100%;
            height: 150px;
            background-color: red;
            /* 开启弹性布局 */
            display: flex;
            justify-content: space-around;
            justify-content: space-around;
            align-items: center;
        }
         div>span {
            background-color: green;
            width: 100px;
            height: 100px;
         }
     </style>
     <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
     </div>

flex 布局基本概念

flex 是 flexible box 的缩写. 意思为 "弹性盒子".

任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局.

flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式.

基础概念:

  • 被设置为 display:flex 属性的元素, 称为 flex container
  • 它的所有子元素立刻称为了该容器的成员, 称为 flex item
  • flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)

注意:
当父元素设置为 display: flex 之后, 子元素的 float, clear, vertical-align 都会失效.

相关推荐
m0_7482402510 分钟前
前端如何检测用户登录状态是否过期
前端
black^sugar12 分钟前
纯前端实现更新检测
开发语言·前端·javascript
寻找沙漠的人1 小时前
前端知识补充—CSS
前端·css
GISer_Jing1 小时前
2025前端面试热门题目——计算机网络篇
前端·计算机网络·面试
m0_748245521 小时前
吉利前端、AI面试
前端·面试·职场和发展
理想不理想v1 小时前
webpack最基础的配置
前端·webpack·node.js
pubuzhixing1 小时前
开源白板新方案：Plait 同时支持 Angular 和 React 啦！
前端·开源·github
2401_857600952 小时前
SSM 与 Vue 共筑电脑测评系统：精准洞察电脑世界
前端·javascript·vue.js
2401_857600952 小时前
数字时代的医疗挂号变革：SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL2 小时前
vue入门教程：组件透传 Attributes
前端·javascript·vue.js
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04机器人编程怎么入门？05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问07SQL 主从数据库实时备份08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10VSCode插件 —— Cody AI （免费AI助手！）