CSS3初识

小蓝的江湖

已于 2022-04-26 10:31:40 修改

阅读量455

点赞数

分类专栏：笔记文章标签： css

于 2022-04-07 19:11:30 首次发布

本文链接：https://blog.csdn.net/weixin_48152652/article/details/124024061

版权

笔记专栏收录该内容

18 篇文章 5 订阅

订阅专栏

文章目录

什么是CSS

Cascading Style Sheet(层叠级样式表)
表现（美化网页
字体，颜色，边距，高度，宽度，背景图片，网页定位

如何查看一个网页的CSS？

浏览器->右击->检查（审查元素）->控制台（control）

CSS发展史

CSS1.0
CSS2.0 (在这个版本出现了DIV（块）+CSS,HTML与CSS结构分离的思想，使网页变得简单，SEO(搜索引擎优化))
CSS2.1
CSS3.0

CSS语法

css位于style标签中，所有的css都遵循下面这个语法公式

选择器{

声明1；

声明2；

声明3；

…}

<style>
    h1{
        color:red;
        witdh:50px;
        height:50px;
    }  /* 给网页中所有的h1标签设置样式*/
</style>

四种导入css的方式

行内样式（位于元素中）
```
<h1  style="color:red">初识css</h1>
```

内部样式（位于独立的style标签中，并且style标签位于head标签中）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css学习</title>
<style>
    h1{
        color:red;
        witdh:50px;
        height:50px;
    } 
</style>
</head>

外部样式（在项目中新建独立的css文件）

链接式

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

导入式

<style>
@import url("css/style.css") /*@import是CSS2.0特有的*/
</style>

优先级:行内样式>内部样式>外部样式

三种基本选择器

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

标签选择器
类选择器

id选择器

   <style>
  /* 标签选择器*/
  h1,h2,h3{
        color:red;
        font: oblique bolder 35px 楷体;
        }
    </style>
      }/* 多种选择器可以写一起，用逗号隔开*/
/* 类选择器*/
 .lsp{-->
         color:yellow
         }-->
  /* id选择器*/
   #hh{-->
           color:black;
        }
 </style>

层次选择器

后代选择器
子代选择器
相邻兄弟选择器

通用选择器

  <style>
  /* 后代选择器（所有后代的p标签样式都改变）*/
body p{
    background:#ff0000;
  }
   /* 子代选择器(子代前面样式都改变，一代)*/
 body>p{
 background:#ff0000;
 }
  /* 相邻兄弟选择器*/
 .active+p{
    background:#ff0000;
 }
     /*通用选择器*/
 .active~p{
    background:#ff0000;
 }
  </style>

结构伪类选择器

特点就是条件判断选择器中一般含有冒号:

<style>
   ul li:first-child{  /*选择ul的第一个子元素*/
       color:red;
    }
  ul li:last-child{  /*选择ul的最后一个子元素*/
       color:red;
    }
    p:hover{    /*hover表示鼠标放上时显示的特效*/
    color:blue;
    }
</style>

属性选择器

属性选择器比id和类选择器高级，建议常用

    <style>
h2[id]{
background:#ff0ff0;
}
h2[class]{
background:#ff0ff0;
}
h2[id=ll]{
background:#ff0ff0;
}
h2[class*="zz"]{
background:#ff0ff0;
}
a[href^=http]{
background:#ff0ff0;
}
a[href$=html]{
background:#ff0ff0;
}
    </style>

更多CSS玩法(浮动，动画等)：
菜鸟教程

盒子模型

内边距（相当于我们所说盒子的厚度）
外边距（相当于我们把盒子放在一个容器中，两个之间的距离）

定位

<!--绝对定位 （position:absloute）相对定位 固定定位 方块定位等等，改变positon属性值即可-->
    <style>
   h4{
        position:fixed;
        color:red;
        }
    </style>

小蓝的江湖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3初识

前端三要素：HTML+CSS+JavaScript如何学习CSS是什么CSS怎么用CSS选择器（重点+难点）美化网页（文字，阴影，超链接，列表，渐变）盒子模型浮动定位网页动画（特写）什么是CSSCascading Style Sheet(层叠级样式表)表现（美化网页字体，颜色，边距，高度，宽度，背景图片，网页定位如何查看一个网页的CSS？浏览器->右击->检查（审查元素）->控制台（control）CSS发展史CS
复制链接

扫一扫