CSS笔记

最新推荐文章于 2023-08-12 21:43:52 发布

大器晚成i

最新推荐文章于 2023-08-12 21:43:52 发布

阅读量234

点赞数

分类专栏： JavaWeb 文章标签： css css3 html

本文链接：https://blog.csdn.net/A_Pluto_i/article/details/123476593

版权

CSS

1.什么是CSS

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

3.css选择器(重点＋难点)

4.美化网页(文字，阴影，超链接，列表,渐变…)

5.盒子模型

6.浮动

7.定位

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

一、什么是CSS

1.什么是css

在这里插入图片描述

2.css发展史

CSS1.0

CSS2.0—— DIⅣ(块)+CSS，HTML与CSS结构分离的思想，网页变得简单，SEOCSS2.1 浮动，定位

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

3.快速入门

1. 规范学习！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS规范学习</title>
    <!--规范，<style>, 可以编写CSS代码，
   每一个声明最好使用分号结尾！



     语法：

     选择器{
           声明1；
           声明2；
           声明3；
     }

     -->
    
    <style>
        h1{
    
           color: darkred;
        }
    </style>
    
</head>

<body>

<h1> CSS规范学习</h1>

</body>
</html>

建议使用html+css

<link rel="stylesheet" href="CSS文件名">

在这里插入图片描述

2.css的优势

内容和表现分离

网页结构表现统一

样式十分的丰富

建议使用独立的html的css文件

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

4.四种css导入方式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS规范学习</title>
    <!--规范，<style>, 可以编写CSS代码，每一个声明最好使用分号结尾！
     语法：
     选择器{
           声明1；
           声明2；
           声明3；
     }
     -->
    <style>
        <!--内部样式-->
        h1{
    
            color: gold;
        }
    </style>
    <!--外部样式-->
    <link rel="stylesheet" href="css学习规范分离操作.css">
</head>
<body>
<!--优先级：  
就近原则（行内）      
行内> 内部 > 外部   
-->
    
       <!--行内样式-->
<h1 style="color: blue"> CSS规范学习</h1>
</body>
</html>

h1{
   
    /*外部样式*/
    color: darkred;
}

5.外部样式两种写法

链接式html:

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

导入式CSS:

<!--导入式-->
 <style>
        @import "XXX.css";
  </style>

二、选择器

1.选择器

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

①标签选择器(标签{})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--标签选择器
    规范： <style>  + 标签 {}
        -->
    <style>
        h1{
    color: darkred}
    </style>
</head>
<body>
<h1> 标签选择器    </h1>
</body>
</html>

②类选择器(.class{})

选择所有与class属性一致的标签，可跨标签。 .class名称{ }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--类选择器
    可以跨标签选择与class同类的。
    格式为： 
    <style> +   .class名称 {}
    -->
    <style>
        .lichengyin{
    color: #e8ff3c}
        .yiyangqianxi{
    color: firebrick}
    </style>

</head>
<body>
<!--这里  h1和 p标签同属class类，实现了跨标签选择颜色-->
<h1 class="lichengyin"> 类选择器1   </h1>
<h1 class="yiyangqianxi"> 类选择器2   </h1>
<p class="lichengyin">  类选择器3   </p>
</body>
</html>

③Id选择器(#id{ })

全剧唯一。 #Id名 { }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--id选择器:  唯一性
    格式： 
    <style>  +  # id名{}
       -->
    <style>
        #lichengyin{
    color: darkred}
        .yiyangqianxi{
    color: chartreuse}
    </style>
</head>
<body>
<h1 id="lichengyin" > id选择器1   </h1>
<h1 class="yiyangqianyi"> id选择器2   </h1>
<p style="color: aqua" >  id选择器3   </p>
</body>
</html>

④优先级

Id选择器> class类选择器 >标签选择器

2.层次选择器

在这里插入图片描述

①后代选择器

所有后代！
格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--后代选择器:
       所有后代！！！
     格式：<style>    body+空格+标签{}
     -->
    <style>
        body p{
    background: #0a25ff;}
    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <!--注意这里的p4、p5、p6标签是怎么写的！！！-->
    <li><p>p4</p></li>
    <li>

最低0.47元/天解锁文章

大器晚成i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记

CSS1.什么是CSS2.CSS怎么用（快速入门)3.css选择器(重点＋难点)4.美化网页(文字，阴影，超链接，列表,渐变…)5.盒子模型6.浮动7.定位8.网页动画（特效效果)一、什么是CSS1.什么是css2.css发展史CSS1.0CSS2.0—— DIⅣ(块)+CSS，HTML与CSS结构分离的思想，网页变得简单，SEOCSS2.1 浮动，定位CSS3.0——圆角，阴影，动画…浏览器兼容性~3.快速入门1. 规范学习！<!DOCTYP
复制链接

扫一扫