首页 > 其他分享 >CSS速查笔记

CSS速查笔记

时间:2022-12-09 14:11:13浏览次数:44  
标签:样式 标签 笔记 color 速查 margin 选择器 CSS 属性

什么是CSS?控制页面样式的,通常放在HTML的head标签内使用

CSS结构
选择器 {css样式}
css样式:{属性:值,属性:值,属性:值}

CSS的引入方式有3种:一般都是在html种的head标签内加css样式
1.style标签内部直接写css样式
  <style>
    h1 {
        color:burlywood;
   }
  </style>
2.通过link标签引入外部的css文件(最正规的方式)
  <link rel="stylesheet" href="csstest.css"> href后面引入的是css文件的全路径
3.html标签内直接加,一般不用这种方式
  <h1 style="color: green">老板好,今天哪个队赢啦</h1>
  
  
一.CSS选择器语法
选择器
基本选择器:
1.id选择器 #id值 {样式;} 表示所有这个id值的标签都会使用这个样式
2.类选择器 .class值 {样式} 表示所有这个class值的标签都会使用这个样式
3.元素/标签选择器 元素{样式} 表示所有这个元素的标签都会使用这个样式
4.通用选择器 *{样式}

组合选择器:
1.后代选择器:div span {样式}
2.儿子选择器:div>span {样式}
3.毗邻选择器:div+span {样式} 同级别紧挨着的下面第一个span
4.弟弟选择器:div~span {样式} 同级别下面所有的span

属性选择器
1.查找含有某个属性的标签:[username]{样式}
2.查找含有某个属性并且有某个值的标签:[username='值']{样式}
3.查找含有某个属性并且有某个值的某个标签:标签名[username='值']{样式}

分组选择器&嵌套选择器
1.标签1,标签2,标签3 {样式}:表示把标签1-3改成xxx样式
2.多个选择器用逗号隔开 {样式}:表示分贝把选择器指定条件的标签修改样式

伪类型选择器
    a:hover {
        color: aqua;
    }

    a:active {
        color: black;
    }

    a:visited {
        color: darkgray;
    }

    input:focus {
    background-color: red;
    }

伪元素选择器
    p:before {
        content:'在前面新增文本且不能选中';
        color: blue;
    }

    p:after {
        content:'在后面添加文本';
        color: orange;
    }

选择器优先级:最常见的有以下几个
1选择器相同,选择器的顺序不同的时候:谁距离标签更近 就按照谁的样式
2选择器不同时优先级:行内>id选择器>类选择器>标签选择器

二.CSS属性
基本属性
height:xxpx;   设置长
width:10px;    设置宽
总结:行内标签不能设置长宽

浮动属性(非常重要)
    1.浮动有什么用?做布局规划用,例如小米官网等等
    2.如何使用?
      float:left;向左
      float:right;向右
      总结:只要是涉及到页面的布局,一般都是用浮动来提前规划好布局
    3.浮动有哪些影响如何解决?
      会造成负标签塌陷问题,如何解决?
      提前写好处理浮动塌陷的css代码,如下,如果谁塌陷 就给加一个 class="clearfix" 即可
      .clearfix:after {
        content: '';
        display: block;
        clear: both;
        }

溢出属性(常用的有以下2个)
overflow:hidden;  超出区域的文字不展示
overflow:scroll;  设置成上下滚动条形式

字体的属性设置
    color:颜色;          设置颜色
    color:rgba(xx,xx,xx,xx); 第4个参数是透明度,范围 0-1
    font-family:字体;    设置字体
    font-szie:16px;     字体大小
    font-weight:bolder; 字体加粗

文字属性
    text-align:center             居中/左对齐/右对齐
    text-decoration:none          给a标签去掉下划线(必会)

背景图片属性
    backgroud-image:url(图片路径);  默认全部铺满
    backgroud-repeat:no-repeat; 不平铺
    backgroud-repeat:repeat-x; x轴平铺
    backgroud-repeat:repeat-y; y轴平铺
    backgroud-position:center center; 第1个左 第2个上
    总结:如果出现多个属性名前缀一样的情况,一般情况下可以简写,只写前缀

边框属性
    border-color:边框颜色;
    border-style:solid;边框
    border-width:5px;边框大小
    border-radius:50%;画圆(必须记住),直接写50% ,长宽一致就是圆

    display属性---属性对应的值的作用
        display:none; 隐藏标签不展示到前端页面,原来的位置也释放,但是存在
        inline:将标签设置为行内标签的特点(一行显示)
        biock:将标签设置成块级标签的特点(独占一行且能设置长宽)
        inline-block:一行且能设置长宽
    visiblty:hidden  单纯隐藏但是位置还在
三.其他
盒子模型
    标签与标签之间的距离:margin-上/下/左/右
        margin:0; 表示上下左右全是0px
        margin:10px 20px; 第1个表示上下 第2个表示左右
        margin:10px 20px 30px; 第1个表示上 第2个表示左右 第3个表示下
        margin:10px 20px 30px 40x; 表示上 右 下 左
        margin:0 auto; 标签水平居中
    标签套标签的距离:padding(或者调整里面文本到边框的距离)
        padding-left:左
        padding-right:右
        padding-top:上
        pading-bottom:下
        用法同上面的margin
    总结:浏览器会自带8px的 margin,一般情况下在写页面的时候,上来先把body的margin去除

定位(包含以下几种)
静态:所有的标签默认都是静态的->position:static,无法改变位置
相对定位:相对于标签原来的位置做移动--->relative
    position: relative; 相对定位,position默认是static,需要改成relative才能是定位过的,才会移动
绝对定位(常用):相对与已经定位过的父标签做移动,如果没有父标签就以body为参照
    例如:小米网站的购物车
    position: absolute;

固定定位(常用):相对于浏览器窗口固定在某个位置来做移动
    例如:小米网站右侧固定的几个标签,再比如进某网站的人工服务等
    position: fixed;其他全部参照浏览器窗口

z-index模态框
    例如百度登录页面:其实是三层结构
    1 最底层是正常内容
    2 中间层黑色的透明区
    3 最上层白色是注册区
    z-index: 99;模框大小

标签:样式,标签,笔记,color,速查,margin,选择器,CSS,属性
From: https://www.cnblogs.com/wfw001-2018/p/16968771.html

相关文章

  • 02jQuery之筛选选择器、链式编程、addClass( )、css( )、元素的显示和隐藏
    筛选选择器:语法描述示例:even选取索引是偶数的所有元素(index从0开始)$("li:even")选取索引是偶数的所有li元素:odd选取索引是奇数的所有元素(index从0开始)$("li:odd")选取......
  • 机器学习的基础图表!学习记录笔记
    文章目录​​机器学习的基础图表!​​​​*一、机器学习概览​​​​1.什么是机器学习?​​​​2.机器学习和人工智能的关系​​​​3.机器学习的工作方式​​​​4.机器......
  • 【集成学习(下)】Task 12 Blending学习笔记
    1.导言在前几个章节中,我们学习了关于回归和分类的算法,同时也讨论了如何将这些方法集成为强大的算法的集成学习方式,分别是Bagging和Boosting。本章我们继续讨论集成学习方法......
  • Linux 操作命令 小笔记
    1.更改文件名名字mv要更改的文件名想要更改后的名字2.cat查看文件内容3-rm删除文件......
  • My Task09 Boosting的思路与Adaboost算法 笔记
    文章目录1.导论2.Boosting方法的基本思路3.Adaboost算法Zm越小证明分类分得越对总结:数学家太强了,respect1.导论Bagging思想的实质是:通过Bootstrap的方式对全样本数据集......
  • 【集成学习(上)】My_Task06_掌握分类问题的评估及超参数调优 笔记
    文章目录​​评估模型的性能并调参:​​​​当类别为两类时,可以绘制混淆矩阵与ROC曲线​​评估模型的性能并调参:更详细的可以查看大佬的知乎:https://zhuanlan.zhihu.com/p......
  • Task5 作者信息关联 笔记
    文章目录​​任务5:作者信息关联​​​​5.1任务说明​​​​5.2数据处理步骤​​​​5.3社交网络分析​​​​5.3.1图类型​​​​5.3.2图统计指标​​​​5.4具体代......
  • CCSP学习笔记-chap5-云运营安全
    1支持数据中心设计的规划流程2设施和构建云环境中的物理基础架构3运行云环境中的物理基础架构4管理云环境中的物理基础架构5构建云环境中的逻辑基础架构6管理云......
  • CCSP学习笔记-chap6-法律、风险与合规
    1理解云环境中的法律要求和独特风险2理解审计流程、方法论与云环境所需的调整3理解数字证据的收集和保管4理解隐私问题,包括司法管辖权的差异5理解外包和云合同设......
  • CCSP学习笔记-chanp4-云应用程序安全
    1识别应用程序安全所需的培训和意识宣贯2理解软件研发生命周期(SDLC)流程3理解云应用程序架构的特性4实现安全软件研发生命周期5理解应用程序安全标准6理解云软件......