CSS学习

什么是CSS

如何学习

  1. css是什么

  2. css怎么用

  3. css选择器（重点）

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

  5. 盒子模型

  6. 浮动

  7. 定位

  8. 网页动画（特效）w3c，菜鸟教程

  9. 仿网站

1.1什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）

字体，颜色，边距，高宽....

1.2发展史

CSS1.0

CSS2.0 DIV（自定义块）+CSS HTML与CSS结构分离思想，网页变简单

CSS2.1浮动，定位

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

2快速入门

<head>
    <meta charset="UTF-8">
    <title>第一个css</title>
<!--    规范，<style>可以编写css的代码
语法：
    选择器{
            声明1;
            声明2;
            声明3;
           }
-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
​
​
style.css
h1{
    color: aqua;
}

image-20220809134247919

css的优势：

  1. 内容和表现分离

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

  3. 样式十分丰富

  4. 建议使用独立的html的css

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

2.1CSS的三种导入方式

<head>
    <meta charset="UTF-8">
    <title>导入方式</title>
    <style>
        /*内部样式*/
        h1{
            color: aqua;
        }
    </style>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<!--优先级：就近原则-->
<!--行内样式-->
<h1 style="color: red;">1</h1>
​

拓展：外部样式两种写法

  • 链接式xtml

<link rel="stylesheet" href="style.css">

 

  • 导入式CSS2.1特有的

    <style>
        @import "style.css";
    </style>

3.选择器

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

3.1、基本选择器

1、标签选择器：选择一类标签

    <style>
        /*标签选择器会选择到页面上所有的这个标签的元素*/
        h1{
            color: aqua;
            background: red;
            border-radius: 30px;
        }
        p{
            font-size: 40px;
        }
    </style>
</head>
<body>
<h1>学java</h1>
<p>听狂神说</p>
</body>

 

2、类选择器 class:选择所有class属性一致的标签，跨标签

   <style>
        /*类选择器的格式  .class的名称{}
        好处：可以多个标签归类，是同一个class，可以复用
        */
        .qingjiang{
            color: aqua;
        }
        .kuanshen{
            color: red;
        }
    </style>
</head>
<body>
<h1 class="qingjiang">标题1</h1>
<h1 class="kuanshen">标题2</h1>
<h1>标题3</h1>
<p class="qingjiang">p标签</p>
</body>

 

3、id选择器：全局唯一

    <style>
        /*
        id选择器 必须保证全局唯一！
        #id名称{}
        不遵循就近原则，固定的
        id选择器>class 选择器>标签选择器
        */
        #qingjiang{
            color: aquamarine;
        }
    </style>
</head>
<body>
<h1 id="qingjiang">标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
</body>

3.2层次选择器

1、后代选择器：在某个元素的后面 爷爷 爸爸 儿子

   <style>
        /*后代选择器*/
        body p{
            background: aliceblue;
        }
    </style>

 

2、子选择器 只有后面一代

/*子选择器*/
        body>p{
            background: bisque;
        }

 

3、相邻兄弟选择器 同辈

 /*兄弟选择器:只能有一个，向下*/
        .active+p{
            background: azure;
        }
​
​
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>

 

4、通用选择器

.active~p{
            background: blueviolet;
        }
当前选中元素的向下的所有兄弟元素

3.2结构伪类选择器

伪类：条件

带冒号的一般是伪类

<style>
        /*ul的第一个子元素*/
        ul li:first-child{/*ul li 选中其中的元素*/
            background: blue;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: blueviolet;
        }
     /*选中p1：定位到父元素，选择当前的第一个元素
        选择当前p元素的父级元素，选中父级元素的第一个,按顺序
        */
        p:nth-child(2){
            background: aqua;
        }
        /*按类型 按类型*/
        p:nth-of-type(2){
            background: burlywood;
        }
    </style>

image-20220809151733986

3.4属性选择器（常用）

id + class结合

= 绝对等于
*= 包含等于
^= （开头为什么什么的）等于
$= （结尾为什么什么的）等于
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: aqua;
            text-align: center;
            color: blue;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*存在id属性的元素    a[]{}*  属性名，属性名=属性值（正则）*/
        a[id]{
            background: red;
        }
        /*id存在first的元素*/
        a[id=first]{
            background: pink;
        }
        /*class中有links item 1的元素*/
        a[class="links item 1"]{
            background: bisque;
        }
        /*class中有links的元素*/
        a[class*="links"]{
            background: blueviolet;
        }
        /*选中href中以http开头的元素*/
        a[href^="http"]{
            background: coral;
        }
        /*选中href中以png结尾的元素*/
        a[href$="png"] {
            background: greenyellow;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class=" item first" id="first">1</a>
    <a href="" class=" item active" target="_blank" title="test">2</a>
    <a href="image/123.html" class="links item" id="">3</a>
    <a href="image/123.png" class="links item">4</a>
    <a href="" class="links item 1">5</a>
    <a href="" class="links item 1">6</a>
​
​
​
</p>
</body>

image-20220809163317098



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