CSS基础笔记（自用）

最新推荐文章于 2024-09-11 20:31:47 发布
最新推荐文章于 2024-09-11 20:31:47 发布
阅读量84 收藏
点赞数 3
文章标签： css 笔记 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75495430/article/details/141650859
版权

笔记仅自用，发文章其实是为了保存和记录（逃）

可以直接打开看代码，也可以用浏览器查看效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta http-equiv="Content-Type" content="text/html;charset-utf-8" />
    <!-- 常用编码格式： utf-8 gbk gb2312 -->
    <title>很好看的标题,css笔记</title>

    <!-- 内部引入方式 -->
    <style type="text/css">
        /* !important的作用：
        把它加在需要提高优先级的属性后面之后，这个属性的优先级就是最高的 */

        /* 选择器{
            属性名1:属性值1;
            属性名2:属性值2;
            属性名3:属性值3;
        } */
        /* 1.标签选择器 */
        div{
            font-size: 30px;
            font-family: "楷体";
            color: rgb(43, 226, 202);
        }
        input{
            background-color: yellow;
        }
        /* 类选择器.class */
        .one{
            color: pink;
            font-family: 隶书;
        }
        .two{
            color: green;
        }
        div.two{/* 意思：控制class=two的div标签 */
            color: rgb(221, 218, 15);
        }
        /* 3.id选择器#id */
        #header{
            font-size: 20px;
            font-family: 幼圆;
        }
        #nav{
            font-size: 20px;
        }
        /* 4.后代选择器（选择器的特殊用法） */
        div p{color: red;}/* 意思：控制div下面的p */
        div p span{color: rebeccapurple;}/* 意思：控制div下面的p标签下的span */
        /* 5.群组选择器 */
        /* 同时控制多个类型（用逗号隔开，标签、类、id都能写）的样式*/
        h1,h2,h3{ color: royalblue;}
        /* 6.全局选择器*（优先级最低） */
        *{color: rgb(44, 113, 204);}
        /* 7.属性选择器[type=""] */
        input[type="text"]{
            background-color: aqua;
        }


        /* 8.伪类选择器 */
        /* 超链接a：必须以link，hover，active，visited顺序书写  
            link正常   
             hover鼠标移上去  
             active鼠标按下，不抬起  
            visited被点击过，被打开过
         */
         .cursors{
            float: right;
         }
        .cursors a:link{
            cursor: pointer;
            color: aquamarine;
        }
        .cursors a:hover{
            cursor: pointer;
            color: aqua;
            font-size: large;
        }
        .cursors a:active{
            cursor: pointer;
            color: red;
            font-size: small;
        }
        .cursors a:visited{
            cursor: pointer;
            color: blue;
        }



        /* child */
        div:first-child{/* 当改标签是它父标签的第一个 孩子 时才生效 */
            color: cadetblue;
        }
        span:first-child{/* 当改标签是它父标签的第一个 孩子 时才生效 */
            color: rgba(243, 164, 161, 0.747);
        }
        
        a:link{
            color: goldenrod;
        }
        a:hover{
            color: red;
            font-size: 30px;
        }
        a:active{
            color: rgb(66, 32, 218);
            font-size: 20px;
        }
        a:visited{
            color: rgb(32, 218, 38);
        }
        .one:visited{/*表示控制one类的visited状态*/
            color: rgb(8, 3, 101);
        }
        img:hover{/*表示控制img类的hover状态*/
            width: 300px;
        }

        /* 背景 */
        body{
            /* transparent默认 */
            background-color: transparent;
        }
        .three{
            width: 800px;
            height: 2000px;
            /* 可以用一行做到跟下面一大串一样的效果，标签不分先后 */
            background: aquamarine url(img/api.jpg) no-repeat 30px 10px fixed;
            
            /*背景颜色*/
            /* background-color: aquamarine; */

            /*背景图片*/
            /* background-image: url(img/api.jpg); */
            
            /* 背景以重复方式布满：默认垂直水平方向重复布满
                no-repeat不重复  repeat-x控制x方向上重复  repeat-y控制y方向上重复 */
            /* background-repeat: no-repeat;

            /* 主图对齐方向 x y   top,left,right,...*/
            /* background-position: 30px 10px;

            /* scroll随页面滚动而移动（默认） 
                fixed保持在页面的固定位置，不随页面滚动而移动（小广告常用那种） */
            /* background-attachment: fixed;*/
        }
        .four{
            width: 800px;
            height: 2000px;
            background-color: green;/*背景颜色*/
        }

        /* 字体 */
        div{
            /* 可以用一行做到跟下面一大串一样的效果，
            标签一定要按style varlant weight size/line-height family 的顺序设置 */
            font:oblique bold 20px "幼圆","微软雅黑","宋体";

            /* 字体大小 small,larger,medium,几个em(几个默认浏览器字体设置大小),px,...*/
            /* font-size: 30px; */

            /* 字体系列 如果计算机不支持第一个，就会显示第二个样式，以此类推*/
            /* font-family: "幼圆","微软雅黑","宋体"; */

            /* 字体颜色 */
            /* color: rgb(79, 115, 133); */

            /* 字体风格  italic斜体 oblique倾斜显示*/
            /* font-style: italic; */

            /* 字体粗细 100~900由细到粗 bolder=900,...*/
            /* font-weight: 900; */

            /*首行缩进：2个字符（偏移量：字体设置大小*2）*/
            text-indent: 2em;

            /* 字体对齐方式 left right center justify自适应（两端对齐） */
            text-align: justify;

            /* （单词之间的/空格两端的文本的）字间距 */
            word-spacing: 50px;

            /* 控制单个字符与单个字符之间的字间距 */
            letter-spacing: 20px;

            /* 文本装饰 
                line-through中划线  overline上划线  underline下划线   */
            text-decoration: underline;

            /* 行高 */
            line-height: 50px;
        }


        /*
        list-style-type 列表前面的点的样式(有序无序列表有区别)
        list-style-image 把列表前面的点换成图片（一样）url()
        list-style-position 列表前面的点的位置（一样）inside靠里（默认）  outside靠外
        list-style 统一设置type，image，position三个属性
        */
        ul{
            /* 
            列表前面的点的样式 
            disc实心圆（默认）  
            circle空心圆 
            square方 
            decimal数字（变为有序）
            none无
            */
            /* list-style-type: circle;
            list-style-image: url(img/fish.png);
            list-style-position: inside; */
            
            /* list-style 统一设置 */
            list-style: circle url(img/fish.png) inside;
        }
        ol{
        /*
        decimal数字（默认）
        upper-roman大写罗马数字
        lower-roman小写罗马数字
        upper-alpha大写英文字母
        lower-alpha大写英文字母
        */
            /* list-style-type: upper-alpha;
            list-style-image: url(img/tail.png);
            list-style-position: outside; */

            /* list-style 统一设置 */
            list-style: upper-alpha url(img/tail.png) outside;
        }

    
        /* display修改成行/块元素  block块元素  inline行元素 */
        .five{
            /* 修改为行元素 */
            display: inline;
        }
        .six{
            /* 修改为块元素 */
            display: block;
        }


        /* 盒子模型（必须是块元素）
        border外边框 
            border-style边框样式 只能统一设置
                border-top/right/button/left-style  可以单独设置
                none无（默认）  solid一条线  dashed虚线  dotted圆点  double两条线  outset灰3d线
            border-width边框宽度 只能统一设置
                border-top/right/button/left-width  可以单独设置
            border-color边框颜色 只能统一设置
                border-top/right/button/left-color  可以单独设置
            border-radius边框设置为圆角  数值越大转弯幅度越大，越圆
        margin外边距
            当两个盒子的外边距重合（包括嵌套）时，会采用外边距更大的那个，作为2个元素的外边距
        padding内边距
            padding-top/right/button/left
        element元素
        width宽
        height高

        auto居中（相对于父元素）
        左右对应、上下对应，如果哪边空了就会赋上对应边的值
        */
        .seven{
            background-color: aquamarine;
            /* width: 300px; *//*宽*/
            width: 50%;/*宽*/
            height: 300px;/*高*/
            /* border: solid black 10px;/*边框*/
            border-style: dashed;
            border-color: blue;
            border-width: 10px;
            border-top-color: red;
            border-top-style: double;

            border-radius: 20px;

            padding: 10px 20px 30px 40px;/*内边距  上右下左*/

            margin: 10px auto ;/*  上右下左*/
        }
        /* body实际上是由内边距和外边距和边框的，它也是个盒子模型 */
        body{
            margin: 0;
            padding: 0;
        }
        /* p标签、h1~6也是盒子模型 */
        p,h1,h2,h3,h4,h5,h6{
            margin: 0;
        }

        /*  浮动float  left,right
            浮动清除clear  left,right,both（左右浮动都清除）
                添加后元素不会被指定方向的浮动元素影响,
                并且这个元素之后的元素都不会受到相同的影响  */
        .float1{
            background-color: red;
            height: 300px;
            width: 200px;
            float: left;
        }
        .float2{
            background-color: yellow;
            height: 180px;
            width: 250px;
            float: left;
        }
        .float3{
            background-color: blue;
            height: 200px;
            width: 200px;
            float: right;
        }
        .long-strip{
            background-color: aquamarine;
            height: 50px;
            width: 100%;
            clear: right;
        }
        .clear{
            height: 0;
            clear: both;/*清除左右浮动，且后续元素都不会被左右浮动影响*/
        }


        /* 定位position
                静态定位static（默认）：普通文档流的方式（从上到下布局）
                相对定位relative   top，right，bottom，left
                    （相对于自身原来的位置，原来的框还在文档流里面占有空间
                      并不会让元素脱离文档流，所以也不会让元素“浮”起来，）
                绝对定位absolute   top，right，bottom，left
                    （相对于距离 最近的 已定位的 祖先元素，元素会脱离文档流）
                固定定位fixed   top，right，bottom，left
                    （相对于整个网页来定位，会脱离文档流，小广告常用） */
        .position1{
            position: static;/*静态定位*/
            background-color: red;
            height: 200px;
            width: 200px;
        }
        .position2{
            position: relative;/*相对定位*/
            top: 10px;/*相对于自身原来的位置，与 上面 边缘 隔开多少距离*/
            left: 20px;/*相对于自身原来的位置，与 左边 边缘 相隔多少距离*/
            background-color: yellow;
            height: 200px;
            width: 200px;
        }
        .position3{
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: blue;
            height: 100px;
            width: 100px;
        }
        .position4{
            position: fixed;
            top: 10px;
            right: 10px;
            background-color: green;
            height: 200px;
            width: 200px;
        }
    </style>

    <!-- 外部引入方式 -->
    <link rel="stylesheet" type="text/css" href="css/main.css">

</head>
<body>
    <div>我是body的第一个孩子</div>
    什么是html元素:下面的就是，从内容到标签都是html元素
    行内标签不换行，块标签单行显示
    一般情况下，块标签里面可以包含行内标签，行内标签不会相互包含
    内部引入方式：把样式写到head区的style标签内
    行内引入方式：把样式写到要添加样式的标签内
    外部引入方式：把样式别的文件内，再在head区用link标签导入本页面后使用样式
        rel引入样式  type引入内容  href引入路径
    优先级：
        行内 > 外部内部谁靠后谁优先
        id选择器 > 类选择器class > 标签选择器 > 全局选择器*

    在调整大小时，百分比 % 都是相对于父元素来说都
    p标签有上下边距加宽处理
    div块标签、span行内标签 没有处理
    h标题标签可嵌套
    b标签加粗
    i标签斜体
    <div class="one">div块元素class=one</div>
    <div class="two">div块元素class=two</div>
    <div class="one two">div块元素class=one、two</div><!--表示class同时=one、two-->
    <div id="header">div块元素id=header</div>
    <div id="nav">div块元素id=nav</div>

    <div >div块元素<p>div下面的p<span>div下面的p标签下的span</span></p></div>

    <h1>h1标题</h1>
    <h2>h2标题</h2>
    <h3>h3标题</h3>
    <p>p段落</p>
    <p style="color: blue; font-size: 10px;">p段落</p>

    <input type="text">
    <input type="password">

    <hr/>
    <span>span是行内标签</span><b>b标签</b><i>i标签</i>
    <img src="img/qingqve.png" style="width: 10%;">
    <textarea></textarea>
    <div>html元素，从内容到标签都是html元素<h1>很好看的标题</h1></div>

    <a href="https://www.baidu.com/" target="_blank">进入百度</a>
    <a href="https://www.baidu.com/" class="one" target="_blank">进入百度</a>
    <a href="https://xz.eoghrt.cn/soft6/bdbh.html" target="_blank" title="进入崩铁">
        <img src="img/640.jpg" >
    </a>

    <div>
        <span>div的第一个孩子<span>div的第一个孙子</span></span>
        <span>div的第二个孩子</span>
    </div>

    <div class="three">
        safsafsdadfsasdf
    </div>
    <div class="four">
        safsafsdadfsasdf
    </div>

    
    <div>但是《原神》是由 米哈游 自主研发的一款全新开放世界冒险游戏。
        (Genshin Impact is a new open world adventure game independently developed by Mihoyo.)
        游戏发生在一个被称作「提瓦特」的幻想世界，在这里，
        被神选中的人将被授予「神之眼」，导引元素之力。你将扮演一位名为
        「旅行者」的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，
        和他们一起击败强敌，找回失散的亲人——同时，逐步发掘「原神」的真相。
    </div>


    <ul>
        <li>你说的对</li>
        <li>但是</li>
        <li>《原神》是由米哈游</li>
        <li>自主研发的开放世界游戏</li>
    </ul>
    <ol>
        <li>你说的对</li>
        <li>但是</li>
        <li>《原神》是由米哈游</li>
        <li>自主研发的开放世界游戏</li>
    </ol> 
    
    
    <div class="five">div修改前是块元素</div>
    <span>放个普通的span标签~</span>
    <span class="six">span修改前是行元素</span>
    <span>放个普通的span标签~</span>

    
    <div class="seven" style="text-size-adjust: 10px; color: black; text-align: justify; text-indent: none;  word-spacing: normal; letter-spacing: normal; ">
        fadssfdasdfasdfsdfadssfdasdfasdfsdfadssfdasdfasdfsdfadssfd
    </div>
    afdasaffa



    文档流
        普通文档流（默认）：从上到下
        浮动float  left,right
        浮动清除clear  left,right
            添加后元素不会被指定方向的浮动元素影响,
            并且这个元素之后的元素都不会受到相同的影响  
        <div>asasafs</div>
        <div>asasafs</div>
        <p>asasafs</p>
        <div>asasafs</div>
        <div>asasafs</div>
        <span>sasfdsdaffs</span>
        <span>sasfdsdaffs</span>
        <span>sasfdsdaffs</span>
        <span>sasfdsdaffs</span>

        <div class="float1"></div>
        <div class="float2"></div>
        <div class="float3"></div>
        <div class="long-strip"></div>

        <div style="color: gold;">清除左右浮动前</div>
        <div class="clear"></div>
        <div style="color: gold;">清除左右浮动后</div>


        定位position
            静态定位static（默认）
                普通文档流的方式（从上到下布局）
            相对定位relative   top，right，bottom，left
                （相对于自身原来的位置，原来的框还在文档流里面占有空间
                并不会让元素脱离文档流，所以也不会让元素“浮”起来，）
            绝对定位absolute   top，right，bottom，left
                （相对于距离 最近的 已定位的 祖先元素，元素会脱离文档流，会随网页滚动而滚动）
            固定定位fixed   top，right，bottom，left
                （相对于整个网页来定位，会脱离文档流，不会随网页滚动而滚动，小广告常用）
        <div class="position1"></div>
        <div class="position2">
            position部分的第四个框飞到上面去了找找看~
            <!--相对于（已定位的）父元素定位-->
            <div class="position3" style="color:gold">绝对定位position部分的第三个框</div>
        </div>
        <!--相对于body定位-->
        <div class="position3" style="color:gold">绝对定位 position部分的第四个框</div>
        <!--相对于整个网页定位-->
        <div class="position4" style="color:gold">固定定位 position部分的第五个框</div>


        
        <div class="cursors">
            伪类  <a  href="https://www.baidu.com?3525/">进入百度</a>
        </div>
        

</body>
</html>

2201_75495430
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基础笔记自用
qq_49132789的博客
04-06 109
一、html+css二、Javascript三、WebAPI JavaScript常用方法总结 四、jquery相关知识 五、Ajax前后端交互 promise六、请求相关笔记转载 vue2项目记录 WebSocket
CSS3 笔记（自用）
yeahooooo的博客
01-12 111
1.在html中使用css方式 1.1行内样式 将css规则写到元素的style属性中 <p style="color:red;">hello</p> 1.2内联样式 将样式写到style标签中，通过选择器选中元素，然后为这些元素指定规则 <head> <meta charset="utf-8"> <style> p{ color:blue; font-size:20px; } </style> <
css基础笔记2（自用）
m0_54386801的博客
07-16 90
字体属性 font-family 设置字体系列，像font-family:"微软雅黑"; font-size 设置字体大小，标题标签比较特殊，需要单独指定文字大小 font-weigh 设置字体粗细，也可以用<b>标签和<strong>标签来加粗，很重要的用<strong> 粗体：bold。特粗体：bolder。lighter：细体。正常字体:normal。 也可以用数字：700相当于bold，400相当于normal,数字后面不加单位 font-sty
自用css笔记
s8806479的博客
03-08 128
html超文本标记语音markup href hyperText reference utf-8是unicode万国码的一种实现方式 gb2312中文简体gdk扩展，包含繁体 lang="en"爬虫 <div> 元素居中position absolute top left50% margin-left=-1/2宽margin-top=-1/2高 abiI reversed="reversed"颠倒 order list < img alt="这是什么什么图片">地址错误时展示文
css学习笔记-（自用）
weixin_47180815的博客
08-26 612
视频总结 CSS选择器 1.标签选择器 什么是标签选择器? 作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性 格式: 标签名称{ 属性:值; } 注意点: 标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签 标签选择器无论标签藏得多深都能选中 只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input…) 2.id选择器 什么是id选择器? 作用: 根据指定的id名称找到对应的标签, 然后设置属性 格式: #i
css学习笔记（自用）
Jun_AI_的博客
07-05 80
1.文本格式化标签 加粗 倾斜 删除线 下划线 2.快捷键 快捷注释 : ctrl + / 1.通配符 :* 2.复合选择器 后代选择器： 元素1 元素2 … { 声明样式 } 表示选择元素1里面的所有元素2 注意中间由空格分开 子元素选择器：元素1 > 元素2 {样式声明} 元素一是父级，元素二为子集 注意中间用 > 隔开 只选择子集 不选择子集的子集 并集选择器：元素1， 元素2 { 样式声明 } 可以选择任何选择器 语法规范 最后一个选择器不用加， div， p， .f
vue笔记自用
w243164468的博客
03-12 880
自定义指令要在与data同级的directives里面定义例子1函数式(定义一个功能类似v-text的指令，但要求放大十倍)函数式可以定义的东西较少，用于比较简单的指令big函数在指令和元素成功绑定时会调用（一上来）,指令所在的模板被重新解析时也会调用。big(a,b){ //a是该指令所在的dom元素也就是标签，b是给该指令的数据，也就是那个n例子2 对象式(定义一个跟v-bind功能类似，但可以让其绑定的元素默认获得焦点)fbind:{bind(a,b){//写在这里的东西在绑定时调用。
CSS实现标题样式（自用笔记）
DT_XUE321的博客
04-30 4722
纯CSS实现简单标题样式 说明： ribbon为公用样式，ribbon1-6对应6个样式，：border， ：after 是伪元素 import React from 'react'; import './index.css' const Title = () => { return ( <div> <section> <h2><span>CSS3实现一些标题样式<
HTML（软测）笔记 自用！自用！ 自用！
02-21
HTML、CSS 和 JavaScript 是网页开发的三大基础技术。HTML 负责结构和内容，CSS 负责样式和布局，JavaScript 负责交互和逻辑处理。三者相互结合，创造出丰富的网页应用程序。 本文只是 HTML 基础知识点的总结，更多...
基于gitbook的学习笔记和自用模板
02-22
模板通常包括自定义CSS和JavaScript，这在创建专业或个性化的学习笔记时非常有用。 5. **学习笔记**：使用Gitbook整理学习笔记是一种高效的方式。你可以按照主题创建章节，每个章节下细分小节，形成清晰的知识结构...
尚硅谷web前端HTML5+CSS3笔记
qq_52380174的博客
12-19 4441
HTML/CSS笔记#自用#尚硅谷#李立超
富文本中去掉 HTML 和 CSS 样式，只保留纯文本
S筱潇S四维Smile
09-11 210
要从富文本中去掉 HTML 和 CSS 样式，只保留纯文本，可以使用以下几种方法：1. 纯 JavaScript 方法你可以使用 JavaScript 的innerText或来提取文本，而忽略 HTML 标签和样式。
CSS 常用元素属性
最新发布
2301_79881188的博客
09-11 487
CSS 属性有很多, 可以参考文档。
前端开发中的CSS命名规范及BEM实践
官方推荐
09-08 2922
前端开发中的CSS命名规范及BEM实践
《HTML 与 CSS—— 响应式设计》
asd4353012的博客
09-11 862
HTML 和 CSS 在响应式设计中起着至关重要的作用。通过使用语义化标签、响应式图像、媒体查询、弹性布局和响应式网格系统等技术，可以实现网页在不同设备上的自适应显示，提供最佳的用户体验。在进行响应式设计时，要遵循移动优先设计、内容优先和测试优化等最佳实践，不断提高网页的质量和性能。随着移动设备的普及和技术的不断发展，响应式设计将变得越来越重要，开发者需要不断学习和掌握新的技术和方法，以满足用户的需求。
水平居中的几种方法（总结）
致未来的你。的博客
09-11 499
水平居中的几种方法（总结）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值