CSS学习笔记

最新推荐文章于 2024-05-30 14:49:04 发布
最新推荐文章于 2024-05-30 14:49:04 发布
阅读量174 收藏
点赞数
分类专栏： 笔记 文章标签： css html html5 css3 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ghoul___/article/details/112987977
版权

1

2.基本选择器

2.1标签选择器

``

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
/*   标签选择器 可以实现复用*/
        h1{
            color: green;
        }
    </style>
</head>
<body>
<p>
    <h1>标题1</h1>
    <h1>标题2</h1>
    <h1>标题3</h1>
    <h1>标题4</h1>
</p>
</body>
</html>

2.2class类选择器

``

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 类选择器可以指定你想使用的 那个样式  可以复用
        结构为
        。类名{


        }
        */
        .zhoujie{
            color: red;
        }
    </style>
</head>
<body>
<p>
    <h1 class="zhoujie">我是标题</h1>
<p class="zhoujie">哈哈哈哈</p>
</p>
</body>
</html>

2.3 id选择器

``

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*  id选择器：指定唯一
        结构为：
        #id名{

        }

        */
        #zhoujie{
            color: red;
        }
    </style>
</head>
<body>
<p>
    <h1 id="zhoujie"> 我是标题</h1>
<h1 id="zhoujie">我是标题</h1>
<!--  选择器的调用次序为  ：  id选择器 > class类选择器  > 标签选择器-->
</p>
</body>
</html>

***** 重点: 选择器的调用次序为 ： id选择器 > class类选择器 > 标签选择器*****

3.层次选择器

``

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 后代选择器  ：定义在某个元素后面的样式   祖爷爷 爷爷 爸爸 你*/
        body p{
            background: red;
        }
        /* 子选择器  定义当前元素的下一代的样式， 儿子*/
        body>p{
            background: green;
        }
        /* 相邻兄弟选择器 同辈 ：定义同辈元素的样式*/
        .active + p{
            background: greenyellow;
        }
        /* 通用兄弟选择器：定义当前选中元素的向下的所有兄弟元素的样式*/
        .active~p{
            background: wheat;
        }
    </style>
</head>

<body>
<li>
    <ul>标题1</ul>
    <ul>标题2</ul>
    <ul class="active">标题3</ul>
    <ul>
        <p class="active">标题4</p>
        <p>标题5</p>
        <p>标题6</p>
    </ul>
</li>
</body>
</html>

4.结构伪类选择器

``

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: #e30ce3;
        }
        /*ul的最后一子元素*/
        ul li:last-child{
            background: green;
        }
        /*选中p1：定位到父元素，选择当前第一个元素
        选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！
        */
        p:nth-child(1){
            background: greenyellow;
        }
        /*选中父元素 ，下的p元素的第二个 ，类型*/
        p:nth-of-type(2){
            background: aqua;
        }
    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>

5.属性选择器(常用)

``

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /*属性名 , 属性名= 属性值(正则)


        = 绝对等于
        *= 包含这个元素
        ^= 以这个开头
        $= 以这个结尾


        */
        /*存在id属性的元素   a[]{}*/
        a[id]{
            background: #e30ce3;
        }
    /*    id=first 的元素*/
        a[id=first]{
            background: aqua;
        }
    /*    class 中有links的元素 */
        a[class*="links"]{
            background: green;
        }
    /*    选中href中以http开头的元素*/
        a[href^=http]{
            background: greenyellow;
        }
    /*    选中href中以jpg结尾的元素*/
        a[href$=jpg]{
            background: red;
        }
    </style>
</head>
<body>
<p>
    <a href="http:www.baidu.com"></a>
    <a href="" id="first"></a>
    <a href="" class="links action"></a>
    <a href="hhh.jpg"></a>
    <a href="" id="hhh"></a>
</p>
</body>
</html>

/*属性名 , 属性名= 属性值(正则)

    = 绝对等于
    *= 包含这个元素
    ^= 以这个开头
    $= 以这个结尾


    */
    /*存在id属性的元素   a[]{}*/

6.文体样式

``

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
<!--
font-family: 字体
font-size:   字体大小
font-weight: 字体粗细
color :字体颜色    
-->
    <style>
        body{
            font-family: "Arial Black" , 楷体;
            color: #e30ce3;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bolder;
        }
    </style>
</head>
<body>

</body>
</html>

7.文本样式

``

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>就可以上下居中
    <style>
        /*
        颜色:
        单词
        rgb 0~F  #000000
        rgba A: 0~1  透明程度

        text align:排版,居中;
        text-indent:2em; 段落首行缩进
        height:300px;
        line-height:300px;
        行高,和块的高度一致,
        */
    </style>
</head>
<body>

</body>
</html>

8.hover active 阴影

``

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认颜色*/
        a{
            text-decoration: none;
            color: aqua;
        }
        /*鼠标悬浮的状态(只需要记住:hover)*/
        a:hover{
            color: red;
            font-size: 50px;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: green;
        }
        /*未点击的状态*/
        a:visited{
            color: greenyellow;
        }
        /*text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径*/
        #price{
            text-shadow: aqua 10px 0px 2px;
        }
    </style>
</head>
<body>

</body>
</html>

/*text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径*/**
#price{
text-shadow: aqua 10px 0px 2px;
}**

阴影坐标

9.列表

``

<title>列表</title>
<style>
    /*ul li*/
    /*
    list-style:
    none 去掉原点
    circle 空心圆
    decimal 数字
    square 正方形
    */
    ul{
        background: #e30ce3;
    }
    ul li{
        height: 30px;
        list-style:none;
        text-indent: 1em;
    }
</style>

10.背景

``

<title>背景</title>
<style>
    div{
        width: 1000px;
        height: 700px;
        border: 1px solid red;
        background-image: url("../5.背景");
        /*默认是全部是平铺的 repeat*/
    }
    .div1{
        background-repeat: repeat-x;
    }
    .div2{
        background-repeat: repeat-y;
    }
    .div3{
        background-repeat: no-repeat;
    }
</style>

11.渐变

12.盒子模型及边框使用

13.盒子的内外边距

14.display与浮动

14.1display

block 块元素

inline 行元素

inline-block 是块元素,当时可以内联,在一行

none 取消

14.3浮动

左右浮动float

15.父级边框塌陷的问题

clear

clear:right; 右侧不允许有浮动元素

clear:left; 左侧不允许有浮动元素

clear:both; 两侧不允许有浮动元素

clear:none;

解决方案:

  • 增加父级元素高度~(固定父级元素的高度 height=…)

#father{

border:1px #000 solid;

height:800px;}

  • 增加一个空的div标签,清除浮动(在HTML中写)

<div class="clear"> <div .clear{ clear:both; margin:0; padding:0; }

  • overflow

在父级元素中增加一个 overflow:hidden;

  • 在父类元素中添加一个伪类:after

#father:after{

content:'';

display:block;

clear:both;

}

小结:

1.浮动元素后面增加空div(简单,但代码中应避免重写空div ,所以不建议使用)

2.将父元素的高度固定(简单,但元素设有了固定的高度,就会被限制)

3.overflow(简单,但当有一些下拉场景避免使用)

4.父类添加一个伪类:after(推荐) 没有副作用,推荐使用

16.定位

相对定位:position:relative;(可以理解为设置后,漂浮在原来的位置上等待,指定位置的漂移)

相对于原来的位置,进行指定的漂移,相对定位的话,它依然在标准文档流中,原来的位置会被保留,只是相对于原来自己位置发生了偏移.

top: -20px;向上漂移20 (注意这里的漂移都是相对于原来位置的漂移,故漂移的方向与你所想的方向相反)

left: 20px; 为向右偏移,相对原来的位置为20px

bottom: -10px;

right: 20px;

16.1相对定位练习

``

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
        *{
            width: 0;
            height: 0;
        }
        #father{
            width: 500px;
            height: 500px;
            background-color: #B5FFFC;
        }
        #box1{
            width: 100px;
            height: 100px;
            display: block;
            background-color: #1663d7;
        }
        #box1:hover{
            width: 100px;
            height:100px;
            display: block;
            background-color: #e30ce3;
        }
        #box2{
            width: 100px;
            height: 100px;
            display: block;
            background-color: #1663d7;
            position: relative;
            top: -100px;
            right: -400px;
        }
        #box2:hover{
            width: 100px;
            height: 100px;
            display: block;
            background-color: #e30ce3;
        } #box3{
              width: 100px;
              height: 100px;
              display: block;
              background-color: #1663d7;
              position: relative;
              right: -200px;
          }
        #box3:hover{
            width: 100px;
            height: 100px;
            display: block;
            background-color: #e30ce3;
        } #box4{
              width: 100px;
              height: 100px;
              display: block;
              background-color: #1663d7;
              position: relative;
              top: 100px;
              right: -400px;
          }
        #box4:hover{
            width: 100px;
            height: 100px;
            display: block;
            background-color: #e30ce3;
        } #box5{
              width: 100px;
              height: 100px;
              display: block;
              background-color: #1663d7;
          }
        #box5:hover{
            width: 100px;
            height: 100px;
            display: block;
            background-color: #e30ce3;
        }


    </style>
</head>
<body>
<div id="father">
    <a href="" id="box1">1</a>
    <a href="" id="box2">2</a>
    <a href="" id="box3">3</a>
    <a href="" id="box4">4</a>
    <a href="" id="box5">5</a>

</div>
</body>
</html>

16.2绝对定位(通常在使用时,使用 父相子绝)

即父用relative

子用absolute

定位:基于xxx定位，上下左右~
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移~

3、在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在在标准文档流中，原来的位置不会被保留

16.3 固定定位

fixed固定定位

16.4z-index透明度

z-index 可以理解为浮动的层级

三横同学
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
aqua.css轻量级纯CSS框架 v1.0
08-14
aqua.css是一个轻量级的纯 CSS框架。有 3 大特征：易用、易定制、有趣。aqua.css特点：易用诸如 React、Vue 之类框架一概不需掌握，参照组件 demo 复制粘贴就能跑出效果来。易定制阅读本项目源码你会发现许多 CSS 变量，它们往往决定了组件的色彩，如果你想“换肤”，只需用不同的颜色变量覆盖即可。有趣本项目用到了很多有趣且实用的 CSS 技巧，非常适
aqua 片色的CSS
04-18
里面的CSS是一个片色的，比较低调，感觉很好的
一款专门为自动化测试打造的集成开发工具【Aqua】，“能快速构建自动化测试项目”，就问你爽不爽吧，，，
weixin_67553250的博客
03-21 1855
在我看来，Aqua比较大的亮点就是可以帮助我们快速构建自动化测试项目，以及内嵌的浏览器方便我们边定位元素边进行代码的编写，其他的功能好像在别的集成开发工具上也能实现，由于目前还是预览版本，Bug还是比较多，关于Aqua工具更多的内容，等正式版发布我们再来讨论吧。
探秘Aqua.CSS：一款轻量级、可定制化的CSS框架
gitblog_00087的博客
03-27 419
探秘Aqua.CSS：一款轻量级、可定制化的CSS框架 项目地址:https://gitcode.com/alphardex/aqua.css Aqua.CSS 是一个简洁而强大的CSS预处理器框架，旨在简化网页设计过程，提供一致且优雅的样式解决方案。这款开源项目强调简约美学和高度灵活性，使开发者能够更高效地构建响应式、无障碍的Web界面。 项目简介 Aqua.CSS的设计理念是“少即是多”，它提...
2017 年 20 个最佳的极简 CSS 框架
f307174490的博客
08-31 3288
无论是在产品设计，还是在研发上，极简主义的应用简直无处不在。如果你和我一样热衷极简主义，那么本文分享的内容，一定是你的“菜”。在文章中，我们将与大家分享 20 个最佳的极简 CSS 框架，它们能够为你提供建站必备的组件，帮助你节省时间。Have Fun! 1. Spectre 这是一个轻量级、响应式的现代 CSS 框架，用于快速建站和扩展程序的开发。它通过最佳编码实践和一致
推荐开源项目：Water.css - 简约优雅的网页样式库
gitblog_00084的博客
03-20 364
推荐开源项目：Water.css - 简约优雅的网页样式库 项目地址:https://gitcode.com/kognise/water.css 项目简介 在Web开发领域，快速构建美观、响应式的页面是每个开发者的目标。Water.css 是一个轻量级且易于使用的CSS框架，它专注于提供基础的样式，使你的网站在保持简洁的同时，也拥有良好的视觉效果。这个项目的理念是“像水一样适应”，意味着它可以轻松...
CSS 学习笔记
weixin_42098295的博客
05-06 1261
定位（Positioning）：static, relative, absolute, fixed, sticky。组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)。媒体查询（Media Queries）：根据不同的屏幕尺寸或设备特性应用不同的样式。属性选择器：根据元素属性选择，如 [type="text"]。Grid：二维布局模型，提供网格系统，进行更复杂的布局设计。伪元素选择器：如 ::before, ::after。
css学习笔记1
qq_42236791的博客
12-12 917
HTML（结构）、CSS（表现）、行为（JavaScript）CSS的全称：层叠样式表（Cascading Style Sheets）。CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字大小、颜色、元素宽高等。简单理解：CSS可以美化HTML，让HTML更漂亮。核心思想：HTML搭建结构，CSS添加样式，实现了：结构与样式的分离。
EPICS工具CSS学习笔记
qq_43456972的博客
10-13 2238
控制系统工作室(CSS)是一项实现控制系统相关的应用，主要针对的是操作员界面。它是基于目前的软件技术（Java、Eclipse），并特别强调了互操作性。 使用Centos7.0系统作为EPICS环境开发，搭建了CSS基础的控件操作，并成功运行。
CSS学习笔记目录
最新发布
wz_1992的博客
05-30 440
CSS学习笔记之基础教程（一） CSS学习笔记之基础教程（二） CSS学习笔记之中级教程（一） CSS学习笔记之中级教程（二） CSS学习笔记之中级教程（三） CSS学习笔记之高级教程（一） CSS学习笔记之高级教程（二） CSS学习笔记之高级教程（三） CSS学习笔记之高级教程（四）
aqua.css：一个优雅CSS框架
02-03
aqua.css：一个优雅CSS框架
css学习笔记
12-20
本人自己学习CSS过程中亲自总结的思维导图，结构清晰，重点突出，便于记牢
HTML+CSS学习笔记.zip
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
html和css学习笔记
03-16
作为html 和css 学习笔记 和 复习大纲
轻量级纯CSS框架,aqua-css
weixin_36301830的博客
08-03 293
aqua.css A delicate CSS framework for humans.范例看到这么精美的 Dashboard 是不是心动了？快来尝试一下吧！安装通过 cdn 引用在页面的标签里添加以下行即可rel="stylesheet"type="text/css"href="https://cdn.jsdelivr.net/gh/alphardex/aqua.css/dist/aqu...
CSS学习笔记：从入门到精通
"这是一份关于CSS学习的文档，作者参考了狂神的课程，旨在深化前端技术理解，特别是为了更好地学习Vue.js。文档详细介绍了CSS的基础知识，包括CSS的概念、发展历史、快速入门方法、选择器、网页美化、盒子模型以及...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三横同学

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值