05 CSS-CSS语法【尚硅谷JavaWeb教程】

05 CSS-CSS语法【尚硅谷JavaWeb教程】

JAVAWEB的学习笔记
学习视频来自:https://www.bilibili.com/video/BV1AS4y177xJ/?vd_source=75dce036dc8244310435eaf03de4e330

  1. 为什么需要CSS
    传统的园区网络采用设备和链路冗余来保证高可靠性,但其链路利用率低、网络维护成本高,CSS技术将两台交换机虚拟成一台交换机,达到简化网络部署和降低网络维护工作量的目的。
  2. CSS最基本的分类:标签样式表、类样式表、ID样式表、组合样式
  3. CSS从位置上的分类:嵌入式样式表、内部样式表、外部样式表

CSS: 层叠式样式表

html中的样式标签现在基本已经淘汰,而是使用CSS表示。

过去使得段落改变颜色的标签 font

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        
    style>
head>
<body>

    <p><font color="red">这里是段落一font>p> 
    <p>这里是段落二p>
body>
html>

效果展示:
05 CSS-CSS语法【尚硅谷JavaWeb教程】_第1张图片

在 < style> 标签中写CSS代码

标签样式表

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        /*被style标签包围的范围是CSS环境,可以写CSS代码*/
        /*标签样式表*/
        p{ /*设置p标签样式*/
            color: red;
        }

    style>
head>
<body>
    <p>这里是段落一p>
    <p>这里是段落二p>

body>
html>

效果展示:
05 CSS-CSS语法【尚硅谷JavaWeb教程】_第2张图片
类样式 前面有个 点(.)

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        /*被style标签包围的范围是CSS环境,可以写CSS代码*/
        /*标签样式表*/
        p{
            color: red;
        }
        /* 类样式 */
        .f20{
            font-size: 20px;
        }

    style>
head>
<body>

    <p>这里是段落一p>
    <p>这里是段落二p>
    <p class="f20">这里是段落三p>
    <p>这里是段落四p>
body>
html>

05 CSS-CSS语法【尚硅谷JavaWeb教程】_第3张图片

ID样式 前面有个井号(#)
id属性在整个HTML文档中,尽量保持唯一(虽然重复不报错)

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        /*被style标签包围的范围是CSS环境,可以写CSS代码*/
        /*标签样式表*/
        p{
            color: red;
        }
        /* 类样式 */
        .f20{
            font-size: 20px;
        }
        /* ID 样式*/
        #p4{
            background-color: aquamarine;
            font-size: 24px;
            font-weight: bolder;
            font-style: italic;
            font-family: "华文彩云";
        }
    style>
head>
<body>

    <p>这里是段落一p>
    <p>这里是段落二p>
    <p class="f20">这里是段落三p>
    <p id="p4">这里是段落四p> 
body>
html>

05 CSS-CSS语法【尚硅谷JavaWeb教程】_第4张图片
组合样式 单独改变div 内部的样式

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        /*被style标签包围的范围是CSS环境,可以写CSS代码*/
        /*标签样式表*/
        p{
            color: red;
        }
        /* 类样式 */
        .f20{
            font-size: 20px;
        }
        /* ID 样式*/
        #p4{
            background-color: aquamarine;
            font-size: 24px;
            font-weight: bolder;
            font-style: italic;
            font-family: "华文彩云";
        }
        /* 组合样式  div内部的标签遵从这个样式*/
        div p{
            color: blue;
        }
        div .f32{
            font-size: 32px;
            font-family: "黑体";
        }
    style>
head>
<body>

    <p>这里是段落一p>
    <p>这里是段落二p>
    <p class="f20">这里是段落三p>
    <p id="p4">这里是段落四p> 

    
    <div>
        <p><span>HELLOspan>p>
        <span class="f20">Worldspan>
        <span class="f20">!!!span>
    div>
body>
html>

-->

05 CSS-CSS语法【尚硅谷JavaWeb教程】_第5张图片

嵌入式样式表:(写在标签里面)

        <p><span style="font-size: 60px; font-weight: bolder; color: chocolate">HELLOspan>p>

05 CSS-CSS语法【尚硅谷JavaWeb教程】_第6张图片

内部样式表:(写在< style > 标签里面)

<head>
    <meta charset="utf-8">
    
    <style type="text/css">
        /*被style标签包围的范围是CSS环境,可以写CSS代码*/
        /*标签样式表*/
        p{
            color: red;
        }
        /* 类样式 */
        .f20{
            font-size: 20px;
        }
        /* ID 样式*/
        #p4{
            background-color: aquamarine;
            font-size: 24px;
            font-weight: bolder;
            font-style: italic;
            font-family: "华文彩云";
        }
        /* 组合样式  div内部的标签遵从这个样式*/
        div p{
            color: blue;
        }
        div .f32{
            font-size: 32px;
            font-family: "黑体";
        }
    style>
head>

外部样式表: html 不写css代码,专门用一个文件写css代码,然后在html代码中引用css代码文件。

创建一个css文件:
05 CSS-CSS语法【尚硅谷JavaWeb教程】_第7张图片
写入css样式代码:

/* ID 样式*/
#p4{
    background-color: aquamarine;
    font-size: 24px;
    font-weight: bolder;
    font-style: italic;
    font-family: "华文彩云";
}
/* 组合样式  div内部的标签遵从这个样式*/
div p{
    color: blue;
}
div .f32{
    font-size: 32px;
    font-family: "黑体";
}

在head标签内部引用:

<link rel="stylesheet" href="static/css/cs_demo01.css">

效果展示:
在这里插入图片描述

本节所有代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    
    <style type="text/css">
        /*被style标签包围的范围是CSS环境,可以写CSS代码*/
        /*标签样式表*/
        p{
            color: red;
        }
        /* 类样式 */
        .f20{
            font-size: 20px;
        }
        /* ID 样式*/
       /* #p4{
            background-color: aquamarine;
            font-size: 24px;
            font-weight: bolder;
            font-style: italic;
            font-family: "华文彩云";
        }*/
        /* 组合样式  div内部的标签遵从这个样式*/
        /*div p{
            color: blue;
        }
        div .f32{
            font-size: 32px;
            font-family: "黑体";
        } */


    style>
    
    <link rel="stylesheet" href="static/css/cs_demo01.css">
head>
<body>

    <p>这里是段落一p>
    <p>这里是段落二p>
    <p class="f20">这里是段落三p>
    <p id="p4">这里是段落四p> 

    
    <div>
        <p><span style="font-size: 60px; font-weight: bolder; color: chocolate">HELLOspan>p>
        <span class="f20">Worldspan>
        <span class="f20">!!!span>
    div>
body>
html>


你可能感兴趣的:(JavaWEB,css,前端,css3)