CSS基础01

1、什么是CSS？

如何学习？

  1. CSS是什么？
  2. CSS怎么用 （快速入门）
  3. CSS选择器 （重难点）
  4. 美化网页（文字、阴影、超链接、列表、渐变...）
  5. 盒子模型
  6. 浮动
  7. 定位
  8. 网页动画（特效）

1.1、什么是CSS

Cascading Style Sjeet 层叠级联样式表

CSS：表现 {美化网页}

字体、颜色、边距、高度、宽度、背景照片、网页定位、网页浮动...

1.2、发展史

CSS1.0

CSS2.0 DIV （块）+ CSS 提出了：HTML与CSS结构分离的思想，网页变的简单，有利于SEO

CSS2.1 浮动、定位

CSS3.0 圆角边框、阴影、动画...、浏览器兼容性

CSS练习格式

css练习格式

1.3 、快速入门

style标签 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--规范，<style>里面可以编写css的代码 
    语法：
        选择器 {
            声明1;        //每一个声明最好使用;结尾
            声明2;
            声明3;
        }
-->
  <style>
    h1 {
      color: red;
    }
  </style>

</head>
<body>

<h1>我是标题</h1>

</body>
</html>

建议使用这种规范：

css开发使用规范

css的优势：

1、内容跟表现分离

2、网页结构表现统一，可以实现服用

3、样式十分丰富

4、建议使用独立于HTML的CSS文件

5、利于SEO，容易被搜索引擎收录！

1.4、CSS的四种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


<!--内部样式-->
  <style>
    h1 {
      color: green;
    }
  </style>


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


</head>
<body>

<!--优先级：就近原则，谁离h1元素最近，用谁  或者可以说是 渲染覆盖  代码执行先后问题-->


<!--行内样式，在标签元素中，编写一个style属性，编写样式即可-->
<h1 >小刘学Java</h1>
</body>
</html>

image-20240411150419348

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

  • 链接式

    html

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

image-20240411150414563

  • 导入式

    @import是CSS2.1特有的！ --> 这种方式在网页元素很多的情况下会先展现出网页的结构再进行渲染 用的不多了，现在多用link标签 会导致你打开一个大型网站的时候，会先出现骨架子，再变得好看

    <!--导入式-->
  <style>
    @import url(css/style.css);
  </style>

    image-20240411150643261

2、选择器

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

​

基本选择器

标签 选择器

标签选择器：选择一类标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*
        标签选择器，会选择到页面上所有的这个标签元素
        但是无法使单个标签元素变，另一个标签不变
         */
        h1{
            color: aqua;
            background: bisque;
            border-radius: 30px;
        }

        p1{
            font-size: 100px;
        }
    </style>

</head>
<body>

<h1>小刘开始学CSS</h1>
<h1>小刘正在学CSS</h1>

<p1>发呆的话就去背英语单词吧</p1>
</body>
</html>

类 选择器

类选择器：选择所有class属性一致的标签，夸标签 .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2. 类选择器</title>
  <style>
    /*
    类选择器的格式 --> .class的名称 + {}
    使用类选择器的好处：不管是不是同一个标签，可以把多个标签归类为同一个class，可以实现服用
     */
    .title01{
        color: #ff94cf;
    }
    .title02{
        color: #6657ff;
    }
    
  </style>



</head>
<body>
<h1 class = "title01">小刘于2024.04.11开始学习css</h1>
<h1 class = "title02">小刘自2022.06.08开始没有好好学习</h1>
<h1 class = "title01">小刘于2023.10.01开始学习</h1>
<h1 class = "title01">小刘2024.04.11继续学习css</h1>

<p1 class = title02>这是一个挑战</p1>

</body>
</html>

id 选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.id选择器</title>

    <style>
        /*  id 选择器：id必须全局唯一
            id选择器格式 --> # + id名 + {}
            优先级：
            不遵循就近原则，是固定的
            id选择器 > class选择器 > 标签选择器
         */

        #xiaoLiu{
            color: #ff86c1;
        }
        .title{
            color: #47ff73;
        }
        h1{
            color: #6657ff;
        }
    </style>



</head>
<body>
<h1 class = "title" id = "xiaoLiu">PleaseInsist9527</h1>
<h1 class = "title">PleaseInsist9528</h1>
<h1 class = "title">PleaseInsist9529</h1>
<h1>PleaseInsist9530</h1>
<h1>PleaseInsist9531</h1>


</body>
</html>

层次选择器

image-20240411202712348

1、后代选择器 --> 在某个元素后面 老爷 爷爷 爸爸 儿子

    /*后代选择器*/
      body p {
  background: #ff86c1;
}

2、子选择器 --> 一代，儿子

/*子选择器*/
body>p{
  background: #6657ff;
}

3、相邻兄弟选择器 -->同辈

/*相邻兄弟选择器 只选择一个相邻的标签 且(向下)*/
.active + p{
  background: aqua;
}

4、通用选择器 --> 选择它下面所有的兄弟标签

/*通用兄弟选择器，当前选中元素的向下所有兄弟元素*/
.active~p{
  background: green;
}
 

<body>

<p>大爷</p>
<p class="active">二爷</p>
<p>三爷</p>
<p>四爷</p>
  <ul>  五爷
    <li>
    大伯  <p>大哥</p>
    </li>

    <li>
    二伯  <p>二哥</p>
    </li>

    <li>
    三伯  <p>三哥</p>
    </li>
  </ul>

<p class="active">六爷</p>
<p>七爷</p>



</body>

结构伪类选择器

伪类 --> 条件，有 ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>

<!--避免使用class，id选择器-->
    <style>
        /*ul的第一个子元素 */
        ul li:first-child{
            background: #6657ff;
        }

        /*ul的最后一子元素 */
        ul li:last-child{
            background: #ff86c1;
        }

        /*选中 p1 ：定位到父元素，选择当前的第一个元素
          选中当前p元素的父亲元素，选中父亲元素的第一个子元素，并且是当前元素才生效！代码添加修改后不管用，按顺序选择
         */
        p:nth-child(2){
            background: #47ff73;
        }

        /*选中父元素，下面的p元素的第二个(类型)，按类型选择*/
        p:nth-of-type(2){
            background: red;
        }
        

xuan</style>
</head>
<body>

<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>

image-20240415104108429

属性选择器（常用）

id + class 结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>

    <style>
        .demo a{
            float: left;
            display: none;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: azure;
            text-align: center;
            color: gray;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /*选中存在id属性的元素   a[]{}
          属性名 --> 属性名 = 属性值(正则匹配)
          = 绝对等于
          *= 包含这个元素
          ^=  以这个开头
          $=  以这个结尾
        */
        a[id]{
            background: yellow;
        }

        a[id = first]{
            background: blue;
        }

        a[class ="links item second"]{
            background: #47ff73;
        }

        a[class *= links]{
            background: red;
        }

        /*选中href中以http开头的元素*/
        a[href ^= http]{
            background: black;
        }

        a[href $= doc]{
            background: blueviolet;
        }


    </style>



</head>
<body>

<p class="demo">

  <a href="http://www.baidu.com" class="links item first" id="first">1</a>
  <a href="" class="links item second" id="second">2</a>
  <a href="images/123.html" class="links item third" id="third">3</a>
  <a href="images/1234.png" class="links item four" id="four">4</a>
  <a href="images/12345.jpg" class="links item five" id="five">5</a>
  <a href="abc" class="links item six" id="six">6</a>
  <a href="/a.pdf" class="links item seven" id="seven">7</a>
  <a href="abc.doc" class="links item eight" id="eight">8</a>

</p>

</body>
</html>

image-20240415111853311

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