zoukankan      html  css  js  c++  java

  • CSS学习——基础分类整理

        1. CSS    

    层叠样式表: Cascading Style Sheets，定义如何显示html元素

    CSS规则: 选择器{属性: 值; 属性: 值;}

    CSS注释: /*在这里写注释说明*/

     

        2. 选择器    

    #元素id 用元素的id属性来设置  
    .className 用html的class属性来设置  
    p.className p元素，且class="className"  
    div p 后代选择器（空格分隔）: div内的所有p 基于关系
    div>p 子元素选择器（>分隔）: div的直接子元素
    div+p 相邻兄弟选择器(+分隔): 与div同父且紧跟div的p
    div~p 后续兄弟选择器(~分隔): 与div同父且在div后的p
    div:first-child 是第一个儿子的div    first-child类似于形容词 伪类：表示特定状态
    a:link a链接未点击时
    a:hover 鼠标移到a上时

        3. 伪类    为选择器添加一些特殊效果

    语法 1. 选择器:伪类{属性:值} 2. 选择器.类:伪类{属性:值}、

    a:link/visited/hover/active 链接:未访问过/访问过/移到到链接/正在活动
    p:befor/after 在元素前/后插入内容
    p:first-child/last-child/nth-child(2) 作为其它元素第1个/最后1个/第2个子元素的p
    p:first-letter/first-line p的第一个字母/行

        4. 样式表    可对一个元素设置多次样式，多重样式会层叠为一个，优先级从1->3降低

    <body style="background-color:Black"></body> 1. 内联样式
    <head>
    <style>
    body {background-color:Black;}
    </style>
    </head>    		 2. 内部样式表
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>    		 3. 外部样式表

        5. 盒子模型    所有html元素可看作盒子，元素从外到内为: 外边距，轮廓，边框，内填充，和实际内容。

    margin 外边距: 与其父元素的间距，透明

    outline:2px black solid
    outline-offset:10px

    轮廓: 位于边框边缘外围的线
    offset: 让轮廓向外偏移10px画
    border 围绕在内边距和内容外的边框
    padding 内填充: 内容与边框的间距
    content 内容: 显示数据

    margin:10px(上) 10px(右) 10px(下) 10px(左); 按序设置外边距的大小，这个顺序是从上开始顺时针画一个框

        6. 位置    

    position

    定位方式，取值如下
    static: 静态，不受top等设置影响，出现在正常流中
    fixed: 相对浏览器窗口是固定的，即使窗口滚动它也不动
    relative: 相对于其正常位置
    absolute: 相对于其父元素，不占空间

    position:absolute;
    z-index:-1;

    与文档流无关，不占据空间
    z-index指定堆叠顺序，相当于z轴
    top,right,bottom,left 元素外边距与相应边的偏移量（相对的元素与position有关）
    float:left/right/none 元素尽量向左或向右移动，浮动元素后的元素才会受影响，
    clear:left/right/none/both 要求元素某一侧不能出现浮动元素
    text-align:left/right/center/justify 文本对齐方式: 左/右/居中/自动调整间距靠到两端
    background-position:left right 背景设置开始的位置x(left/right/center) y(top/bottom/center)

        7. 颜色    

    color 文本颜色
    background-color 背景颜色
    border-color 边框颜色
    outline-color 轮廓颜色
    text-decoration-color 文字横线（下划、删除）颜色

    background: linear-gradient(方向/角度,颜色1,颜色2,...);
    background: radial-gradient(方向/角度,颜色1,颜色2,...);

    方向: to bottom、to top、to right、to left、to bottom right
    角度: 从12点方位顺时针增加
    设置背景颜色渐变，线性、

        8. 显示方式    

    display

    none: 不显示（不占空间）
    block: 块元素
    inline: 内联元素
    visibility

    visible: 可见
    hidden: 不可见（仍占空间）
    collapse: 和hidden效果类似

        9. 图片设置     

    background-image:url("1.jpg") 设置背景图片

    border: 30px solid transparent;
    border-image-source:url("1.jpg");
    border-image-slice:20 20 20 20;
    border-image-10 10 10 10;
    border-image-outset:1 1 1 1;
    border-image-repeat:repeat/sterch

    border:边框
    source:边框图像地址
    slice:4个值代表4条线距边的位置
    边框图片宽度
    outset:图片延伸到元素盒子的大小
    repeat:图片扩展方式重复/拉伸
    list-style-image:url('1.jpg');

    列表标记的图片

    boder-image原理:
    把图片用4条线切割成9宫格。每个格子与边框位置一一对应。9宫格的中间部分是透明的，空的。若image-width大于border宽度，多余部分可延伸到内容的空间

        10. 图像处理    

    filter:滤镜属性(效果大小)

    blur(2)高斯模糊为2
    grayscal(10%)转换成10%的灰度图...
    opacity:0.2

    指定不透明度
    从0.0(完全透明)到1.0(完全不透明)
    background:url(1.jpg) 0 0;

    图像拼合技术，从图的某个位置开始截取一部分
    0 0: 指定从图片左、上开始的位置

    图像变换

    transform:roate(30deg);

    transform: 变形转换属性。
    让某个元素改变形状，大小和位置
    roate(): 2D转换方法，旋转
    transform:rotateX(30deg) 3D转换方法，沿X轴3D旋转

    div{
    100px;
    transition-property:width;
    transition-duration:2s;
    transition-timing-function:linear;
    transition-delay:2s;}
    div:hover{300px;}

    transition: 过渡，从一种样式转变到另一个时，
    无需使用Flash动画或JavaScript
    鼠标移动到div上，它的宽度(property)从100逐渐变到300
    timing-function: 随时间变化速度变化
    变化持续时间(duration): 2s
    变化开始时间(延迟delay): 2s

     div{
    animation: myAnimation 5s;}
    @keyframes myAnimation{
    0% {background:red;}
    25 {background:yellow;}
    100%{background:blue;}}

     animation: 动画名称 持续时长
    @keyframes规则，myAmimation动画名称
    0%->100%指定变化发生的时间
    变化完成后回到0%的情况

        11. 间距    

    letter-spacing 字母间距
    word-spacing:30px; 单词间距
    border-collapse:separate;
    border-spacing:10px 50px;

    表格中相邻单元格的边框间距离
    仅用于"边框分离"模式
    white-space

    指定元素内的空白怎样处理

        12. 大小    

    width(宽) + padding(内边距) + border(边框) = 实际宽度
    height(高) + padding(内边距) + border(边框) = 实际高度

    		  
    background-size: 80px 60px; 背景大小
    font-size:10px 字体大小

    overflow:auto;
    resize:both|horizon|vertical;

    需设置overflow
    resize:允许用对元素大小进行手动调整

    box-sizing:content-box|border-box

    指定width/height设置的目标为内容盒子|边框盒子

        13. 分列    

    column-count:3;
    column-span:1|all;
    column-gap:5px;
    column-10px;
    column-fill:auto|balance;
    column-rule-color:#000000;
    column-rule-style:solid|dotted;
    column-rule-10px

    column将元素分成多列（栏）显示
    count: 列数
    span: 跨1或所有列
    gap: 两列的间距
    列的宽度
    fill: 填充方式自动或尽量列长平衡
    column-rule: 列与列之间的线的设置

    14. 单位

    p{font-size: 10px;}  

    div{font-size:10px;}

    p{font-size: 1.5em;}

    p的字体大小

    1.5*p的最近父元素的font-size
    p{font-size: 1.5rem;} 针对根元素html

    p{font-size: 8vm;}

    p{font-size: 8vh;}

    		 vm/vh把视口的宽和高分成100份

    参考：

    https://www.runoob.com/cssref/
  • 相关阅读:
    纯JS实现俄罗斯方块，打造属于你的游戏帝国
    Java 集合框架
    项目（1-2）ES32获取mpu9250传入数据库
    项目（1-1）ES32获取mpu9250数据网页交互显示
    开发（三）ESP32 硬件配置
    开发（二） ardunio批量固件上传地址
    项目（1-1）人脸识别
    海康相机开发（1） SDK安装和开发
    ARDUNIO IMU processing姿态数据可视化
    ESP8266 tcp透传AP+STA
  • 原文地址：https://www.cnblogs.com/coolqiyu/p/7040052.html
Copyright © 2011-2022 走看看