zoukankan      html  css  js  c++  java
  • 强哥CSS学习笔记

    html嵌套css样式:
    1.外部(推荐)
    2.内部
    3.内联(不推荐)


    css优先级
    1.内联
    2.id选择器
    3.class选择器
    4.标签

    css长度单位:
    1.px
    2.em (14px)

    css选择器:
    常用选择器
    基本选择器
    层级选择器
    伪类选择器
    属性选择器

    常用选择器:
    1.标签
    2.id
    3.class
    4.关联
    .div1 .imgcls{

    }

    5.组合
    .div1 .imgcls,.div2 .imgcls{

    }

    基本选择器:
    1.:first-child
    2.:first-letter 第一个字符
    3.:first-line 第一行
    4.:last-child
    5.:nth-child(2)

    层级选择器:
    a,b 和
    a b 选择后代
    a>b 选择子集
    a+b a后面的b

    伪类选择器:
    :hover 划过上方
    :focus 获得焦点
    ::selection 选择

    属性选择器:
    [id] 含有属性
    [id=use1] 属性等于
    [name*=us] 包含us
    [name|=en] 以en开头
    [name^=en] 以en开头
    [name$=en] 以en结尾

    常见的样式属性和值:
    1.字体和颜色
    2.背景
    3.文本
    4.边框
    5.鼠标光标
    6.列表
    7.定位
    8.内外边距
    9.浮动和清除浮动
    10.滚动条
    11.显示和隐藏

    字体:
    font:
    font-size: 字体大小
    font-family: 字体类型
    font-style: 字体样式(斜体italic)
    font-weight: 字体粗细(bold加粗)

    文本:
    letter-spacing 字间距
    word-spacing 词间距
    text-decoration none|underline|overline|line-through 横线
    text-align left|center|right 文字对齐
    text-indent 首字母缩进
    line-height 行高
    color 颜色
    word-break 自动换行

    背景:
    background
    background-color 背景色
    background-image 背景图片
    background-repeat 背景图片是否重复(平铺)
    background-attachment 背景图随内容滚动(用在body身上,其他不适用)
    background-position

    边框:
    1.border-style solid实线 dotted小虚线 dashed小横线 double双线 groove凹 ridge凸 inset凹槽 outset凸槽
    2.border-width
    3.border-color
    4.border-left right bottom top

    鼠标:
    cursor:crosshair十字 pointer小手 text文本 wait等待 default默认 help帮助

    列表:
    list-style-type

    1.none空|desc实心圆|circle空心圆|square实心方块|decimal数字|lower-roman小写罗马数字|upper-roman大写|lower-alpha小写字母|upper-alpha大写字母
    2.list-style-type:none; 列表前面的选项图标取消
    3.text-decoration:none; a标签下划线取消

    尺寸:
    height:
    max-
    max-height:

    文本框:
    textarea

    height:
    resize

    样式继承:
    文字有关的样式会继承下去
    font-size:
    font-family:
    font-style:
    color:
    line-height:
    font-weight:
    word-spacing:

    表格:
    border-collapse: collapse边框合并|separate不合并
    border-spacing: 间距

    定位:
    1.position: absolute绝对定位|relative相对定位
    2.top
    3.left
    4.定位
    5.z-index z轴

    绝对定位和相对定位:
    1.相同点:
    脱离文档流,在文档流上方
    2.不同点
    坐标系不同,绝对的坐标系在浏览器左上角,相对的坐标系在自己的左上角
    占位
    绝对不占位,相对占位

    div绝对居中:
    1.父div:position:relative;
    2.子div:position:absolute

    外边距:
    margin-right:
    margin-left:
    margin-top:
    margin-bottom: 10px;
    如果只提供一个,将用于全部的四边。
    如果提供两个,第一个用于上-下,第二个用于左-右。
    如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
    如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。

    内边距:
    padding

    浮动:
    float

    清除(阻止)浮动
    clear left|right|both
    可以有效防止盒子回缩
    <div style='clear:both'></div>

    滚动条:
    overflow: hidden隐藏|auto自动|scroll出现滚动条

    显示和隐藏:
    1.display:none隐藏|block块显示|inline行显示
    2.visibility:visible显示|hidden隐藏

    边框样式:
    1.border-radius
    第一个值是水平半径。
    如果第二个值省略,则它等于第一个值,这时这个角就是一个四分之一圆角。
    如果任意一个值为0,则这个角是矩形,不会是圆的。
    值不允许是负值。
    2.box-shadow <length>水平偏移 <length>垂直偏移 <length>阴影模糊值 <length>阴影外延值 || <color>颜色
    box-shadow: 5px 5px 5px 0px #999;
    none: 无阴影
    <length>①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
    <length>②: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
    <length>③: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
    <length>④: 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
    <color>: 设置对象的阴影的颜色。
    inset: 设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影

    3.border-image:
    border-image: url('b.png') 26 26 round;
    stretch | repeat| round | space
    stretch: 指定用拉伸方式来填充边框背景图。
    repeat: 指定用平铺方式来填充边框背景图。当图片碰到边界时,如果超过则被截断。
    round: 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
    space: 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。

    4.background-size: 属性规定背景图片的尺寸
    5.background-origin: 属性规定背景图片的定位区域
    border-box边框区域
    padding-box内边距区域
    content-box有效区域

    6.text-shadow 文字阴影
    text-shadow:3px 3px 3px #f00;
    7.word-wrap:break-word;单词折行
    类似word-break
    8.字体样式
    @font-face
    {
    font-family: my;
    src:url('my.ttf');
    }

    2D样式:
    1.translate() 移动
    2.rotate() 会改变坐标系
    3.scale() 比例

    3D样式:
    1.rorateX(30deg);
    2.rorateY(30deg);

    多栏样式:
    column-count
    column-gap
    column-rule

    用户界面:
    1.轮廓样式
    outline-offset

  • 相关阅读:
    bzoj 1176 cdq分治套树状数组
    Codeforces 669E cdq分治
    Codeforces 1101D 点分治
    Codeforces 1100E 拓扑排序
    Codeforces 1188D Make Equal DP
    Codeforces 1188A 构造
    Codeforces 1188B 式子转化
    Codeforces 1188C DP 鸽巢原理
    Codeforces 1179D 树形DP 斜率优化
    git commit -m "XX"报错 pre -commit hook failed (add --no-verify to bypass)问题
  • 原文地址:https://www.cnblogs.com/redheat/p/7069751.html
Copyright © 2011-2022 走看看