zoukankan      html  css  js  c++  java
  • Css 笔记

    选择器{属性:值; 属性:值;}

    属性

    解释

    Width:20px;

    Height:20px;

    Background-color:red;

    背景颜色

    font-size:24px;

    文字大小

    text-align:left | center| right

    内容的水平对齐方式

    Vertical-align:middle居中| top bottom

    垂直对齐方式

    text-indent:2em;

    首行缩进

    Color:red;

    文字颜色

    line-height: 80px;

    行高

    CSS嵌入式 

    <style type="text/css">
    </style>

    CSS链入式

    <link rel="stylesheet" href="11css.css">

    display块元素、行内元素

    块级元素(block) <h1>...<h6>,<p>,<div>,列表

    内联元素(inline)  <span>,<a>,<img>,<strong> ...

    块元素转行内元素display:inline; 

    行内元素转块元素display:block;块元素的默认值 元素会显示为块元素 前后带换行符

    块和行内元素转行内块元素display:inline-block;

    None  不会被显示

    inline; 内联元素的默认值 元素会显示内联元素 前后无换行符

    block;块元素的默认值 元素会显示为块元素 前后带换行符

    inline-block; 行内块元素 元素既具有内联元素特征 也有块元素特征

    继承 h系列不能继承文字大小。a标签不能继承文字颜色。

    链接伪类

    a:link{属性:;}       链接默认状态  

    a:active{属性:;}      链接激活的状态

    a:hover{属性:;}      鼠标放到链接上显示的状态  

    a:visited{属性:;}     链接访问之后的状态

     focus{属性:值;}     获取焦点

    文本修饰

    text-decoration: none  去除修饰|  underline  添加下划线 |   line-through 添加删除线 | overline 设置文本的上划线

    文本阴影

      Text-shadow: color x-offset y-offset blur-radius;

    Color颜色 x-offset X轴位移,用来制定阴影水平位移量

    y-offset Y轴位移,用来指定阴影垂直位移量 

    blur-radius 阴影模糊半径,代表阴影向外模糊的模糊范围

    浏览器兼容性 IE+  Firefox 3.5+  Chrome 2.0+  Opera 9.6+  Safari 4.0+

    看兼容性网址 caniuse.com

    背景属性

    background-color 背景颜色

      background-color: rgba(80,80,80, 0.2);透明度

    background-image    背景图片

    背景平铺

    Background-repeat  repeat(默认) | no-repeat 不重复| repeat-x  | repeat-y  

    背景定位

    Background-position  left 左 | right |  center  中|  top  | bottom |

    背景颜色渐变

    Background: Linear-gradient(position,color1 ,color2,....)

    Background: Linear-gradient(to left,color1 ,color2,....)

    从右(color1)到左(color2)

    Position 渐变方向

    兼容Webkit内核的阅览器

    -webkit- Linear-gradient(position,color1 ,color2,....)

    背景图片的大小控制

     Background-size:auto 自动 | 100px  | 50% |  percentage | cover  | contain

    percentage 当使用百分值时,不是相对于背景的尺寸大小来计算的,而是

    相对于元素的宽度来计算的

    Cover 整个背景图片放大填充了整个元素

    Contain 让背景图片图片保存本身的身高比列,将背静图片缩放到宽度或者

    高度正好适应所定义背景的区域

     列:background-position:left bottom;

    background-position:20px 30px;  左右  上下

           background: url("../img/cc.jpg") red no-repeat 0px 30px ;

    行高

    浏览器默认文字大小:16px

    行高:是基线与基线之间的距离

    行高=文字高度+上下边距

        div{
                line-height: 80px;
                height: 80px;
                border:1px solid red;
            }

    边框

    Border-top-style:  solid   实线

                   dotted  点线

                   dashed  虚线

    double 双线

    None  hidden隐藏

    Border-top-color   边框颜色

    Border-top-width   边框粗细

    边框属性的连写   特点:没有顺序要求,线型为必写项。

    border-top:2px blue dotted;

    四个边框值相同的写法

    border:1px red solid;

    边框合并border-collapse:collapse;

    禁止边框撑大

    box-sizing: border-box禁止边框撑大 | ontent-box 默认的

    圆角边框

    Border-radius:10px 20px 30px 40px; 左上 右上 右下 左下

    左半圆Border-radius:10px 0px 0px 10px;

    上半圆Border-radius:10px 10px 0px 0px;

    盒子的阴影

    Box-shadow:inset x-offset y-offset blur-radius color;

    Inset 阴影的类型 内阴影

    x-offset  X轴位移 指定阴影水平位移量

    y-offset  Y轴位移 用来指定阴影垂直位移量

    blur-radius  阴影模糊半径阴影向外模糊的模糊范围

    Color 阴影颜色 定义绘制阴影时所用的颜色

    内边距

     Padding-left 左 |   right 右 |  top 上 |  bottom下

    Padding 连写

    Padding: 20px;   上右下左内边距都是20px

    Padding: 20px 30px;   上下20px   左右30px

    Padding: 20px  30px  40px;   上内边距为20px  左右内边距为30px   下内边距为40

    Padding:  20px  30px   40px  50px;   20px 30px  40px  左  50px

    外边距

    margin-left  左 | right 右 |  top 上 |  bottom 

    外边距连写

    Margin: 20px;    上下左右外边距20PX

    Margin: 20px 30px;   上下20px  左右30px

    Margin: 20px  30px  40px;     20px  左右30px   下  40px 

    Margin: 20px  30px   40px  50px; 20px   30px   40px  50px

    浮动

    Float: left 左浮动

    Float:right 右浮动

    Float:none 无浮动 默认值。元素不浮动,并会显示在其文本中出现的位置

    清除浮动clear

      Clear:left 在左侧不允许有浮动

    Clear:right 在右侧不允许有浮动

    Clear:both 在左右两侧不允许有浮动

    Clear:None 默认值 允许浮动元素出现在两侧

    After方法

     列:<style  type="text/css">
         .clear:after{
             content"";/*在clear后面添加内容为空*/
             display: block;/*把添加的内容转化为块元素*/
             clear: both;/*清除这个元素两边的浮动*/
        }</style>

    <div class="clear">
         <div></div>
        </div>

    Overflow溢出处理  overflow:Visible

    Visible 默认值 内容不会修剪 会呈现在盒子之外

    Hidden 内容会修剪 并且其余内容是不可见的

    Scroll 内容会被修剪 但是浏览器会显示滚动条以便查看其余内容

    Auto 如果内容被修剪 则浏览器会显示滚动条以便查看其余的内容

    Position定位

    Absolute 绝对定位

    Relative 相对定位

    选择器

    选择器

    类型

    功能描述

    E F

    后代选择器

    选择匹配的F元素,并且匹配的F元素包含在匹配的E元素内

    E>F

    子选择器

    选择匹配的F元素,并且匹配的F元素是匹配的E的子元素

    E+F

    相邻元素选择器

    选择匹配的F元素,并且匹配的F元素位于匹配的E元素后面

    E~F

    通用兄弟选择器

    选择匹配的F元素,并且匹配的E元素后面的所有F元素

     

    结构选择器

    选择器

    功能描述

    F E:first-child

    作为父元素(F)的第一个子元素的元素E

    F E:last-child

    作为父元素(F)的最后一个子元素的元素E

    F E:nth-child(n)

    选择父级元素F的第n个子元素E,(n可以使1,2,3)关键字为even odd

    E:first-of-type

    选择父元素内具有指定类型的第一个E元素

    E:last-of-type

    选择父元素内具有指定类型的最后一个E元素

    F E:nth-of-type(n)

    选择父级元素F的第n个子元素E

     

    属性选择器

    选择器

    功能描述

    E[attr]

    选择匹配具有属性attE元素

    E[attr=val]

    选择匹配具有属性attrE元素,并且属性值为val(其中val区分大小写)

    E[attr^=val]

    选择匹配元素E,且E元素定义了属性attr,其属性是以val开头的任意字符串

    E[attr$=val]

    选择匹配元素E,且E元素定义了属性attr,其属性是以val结尾的任意字符串

    E[attr*=val]

    选择匹配元素E,且E元素定义了属性attr,其属性包含了val ,换句话说,字符串val与属性值中的任意位置相匹配

    窗竹影摇书案上,野泉声入砚池中。 少年辛苦终身事,莫向光阴惰寸功
  • 相关阅读:
    HDU 6071
    HDU 6073
    HDU 2124 Repair the Wall(贪心)
    HDU 2037 今年暑假不AC(贪心)
    HDU 1257 最少拦截系统(贪心)
    HDU 1789 Doing Homework again(贪心)
    HDU 1009 FatMouse' Trade(贪心)
    HDU 2216 Game III(BFS)
    HDU 1509 Windows Message Queue(队列)
    HDU 1081 To The Max(动态规划)
  • 原文地址:https://www.cnblogs.com/qhantime/p/10731722.html
Copyright © 2011-2022 走看看