CSS-第一天

CSS

如何学习

  1. CSS是什么

  2. CSS怎么用（快速入门）

  3. CSS选择器（重点+难点）

  4. 美化网页（文字，阴影，超链接，列表，渐变...）

  5. 盒子模型

  6. 浮动

  7. 定位

  8. 网页动画（特效效果）

推荐网站

1. CSS简介

1.1 什么是CSS

  • 英文全程：cascading style sheet 层叠级联样式表

  • CSS：表现：美化网页

  • 字体、颜色、边距、高度、宽度、背景图片，网页定位，网页浮动

    image-20220518085836675

样式表位置：

image-20220518090059119

1.2、发展史

CSS1.0:

CSS2.0:提出分离模式 DIV+CSS,HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1：浮动，定位

CSS3.0:圆角，阴影，动画...浏览器兼容性

1.3、快速入门

 

CSS的优势

  1. 内容和表现分离

  2. 网页结构表现统一，可以实现复用

  3. 样式十分的丰富

  4. 建议使用独立于html的css文件

  5. 利用SEO，容易被搜索引擎收录

1.4、CSS的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
<!--    内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>
    外部样式
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级：行内样式》内部样式》外部样式
内部样式与外部样式谁离优化元素近谁的优先级大-->
<!--行内样式-->
<h1 style="color: red">这是一个标题</h1>
</body>
</html>

扩展：外部样式的两种写法

  • 连接式

  •     外部样式
        <link rel="stylesheet" href="css/style.css">

  • 导入式:CSS2.1

    @import是2.1特有的

        <style>
            @import url("css/style.css");
        </style>

2 选择器

作用:选择页面上的某一个或者某一类元素

2.1选择器

  1. 标签选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
      <style>
        h1{
          color: red;
        }
        p{
          color: green;
        }
      </style>
    </head>
    <body>
    <h1>学java</h1>
    <p>听狂神说</p>
    </body>
    </html>

     

  2. 类选择器 class

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
      <style>
        /*类选择器格式 .class的名称{}
        好处，可以多个标签归类，是同一个class，可以复用
        */
        .b1{
          color: #8d4141;
        }
        .b2{
          color: green;
        }
      </style>
    </head>
    <body>
    <h1 class="b1">标题1</h1>
    <h1 class="b2">标题2</h1>
    <h1 class="b1">标题3</h1>
    <p class="b1">狂神</p>
    </body>
    </html>

     

  3. id选择器：全局唯一！ #id名{}

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
      <style>
        /*
        id选择器 #id 名称{}
        优先级：不遵循就近原则，id>class>标签
         */
        #i1{
            color: red;
        }
      </style>
    </head>
    <body>
    <h1 id="i1">标题1</h1>
    <h1 id="i3">标题1</h1>
    <h1 class="i3">标题1</h1>
    <h1>标题1</h1>
    </body>
    </html>

     

2.2 通用选择器

  1. 后代选择器：在某个元素的后面

        /*后代选择器*/
        body li{
          background: green;
        }

     

  2. 子选择器

        /*子选择器*/
        body>ul{
          background: green;
        }

     

  3. 相邻兄弟选择器

        /*兄弟选择器：向下相邻有效*/
        .c2 + p{
          background: green;
        }

     

  4. 通用兄弟选择器

        /*通用兄弟选择器：向下所有兄弟元素*/
        .c1 ~ p{
          background: green;
        }

     

2.3 结构伪类选择器

伪类：条件

    /* 选中ul中的第一个元素
     */
    ul li:first-child{
      background: green;
    }
    /*ul中的最后一个元素*/
    ul li:last-child{
      background: red;
    }
    /*选中P2*/
    p:nth-child(2){
      background: yellow;
    }

2.4 属性选择器（常用）

id 与class的结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .demo a{
      float: left;
      display: block;
      height: 50px;
      width: 50px;
      border-radius: 10px;
      background: #5bbaff;
      text-decoration: aliceblue;
      color: #8d4141;
      text-align: center;
      margin-right: 5px;
      font: bold 20px/50px Arial;
    }
    /*存在id属性的元素 a[]{}*/
    a[id]{
      background: red;
    }
    a[class=links]{
      background: aqua;
    }
    a[class*=links]{
      color: white;
    }
  </style>
</head>
<body>
<p class="demo">
  <a href="http://www.baidu.com" class="links item first" id="first">1</a>
  <a href="http://www.hao123.com" class="links item first" id="first2">2</a>
  <a href="http://www.zhihu.com" class="links item" target="_blank">3</a>
  <a href="http://www.faw.com" class="links" >4</a>
  <a href="http://www.dedao.com" class="links item" >5</a>
</p>
​
</body>
</html>

=:绝对等于

*=包含

^=开头

$=结尾

3、 美化网页信息

3.1 为什么要美化网页

  1. 有效传递页面信息

  2. 美化页面，页面漂亮，吸引用户

  3. 凸显页面主题

  4. 提高用户的体验

     

span标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #s01{
      font-size: 50px;
    }
  </style>
</head>
<body>
<span id="s01">java</span>学习
</body>
</html>

3.2 美化字体

font-family: 字体

font-size: 字体大小

font-weight: 字体粗细

color: 字体颜色

3.3 文本样式

  1. 颜色 color

  2. 文本对齐排版 text-align:居中；

  3. 首行缩进 text-indent：缩进；

  4. 行高

  5. 装饰

posted @   HMIT  阅读(81)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
相关博文：
·  Bootstrap学习笔记-武沛齐老师课程
·  CSS学习
·  CSS基础01
·  CSS（1）什么是CSS和选择器
·  CSS学习Day01
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
点击右上角即可分享
微信分享提示