一寸光阴一寸金,寸金难买寸光阴!

    

CSS学习笔记

CSS学习笔记

引入:

  • 外部样式:
        <link rel="stylesheet" href="style.css" />
  • 内部样式表:
        <head>
            <style>...<style>
        </head>
  • 内嵌样式:
        <p style="color:red;margin-left:20px"></p>

注释:

/* 我是注释;*/

浏览器私有属性:

chrome、safari: -webkit-;
firefox: -moz-;
IE:-ms-;
opera: -o-;

语法规则:

    margin:[<length>|<percentage>|auto]{1,4}
    /*
        <length>:基本元素;
        `|`:组合符号;
        {1,4}:数量符号;
    */

基本元素:
1、关键字: auto、solid、bold……
2、组合符号:

空格:表示必须出现,且顺去固定;

&&:必须出现,但顺序不固定;

||:至少出现一个,但顺序随意;

|:只能出现一个;

[]:分组;

+:可出现一次或多次;

:可出现也可不出现;

{}:可以出现的次数;{2,4}:最少出现2次,最多出现4此;

*:可出现0次,1次或多次;

#:需出现1次或多次,需要用,隔开;

规则语法:

@media:响应式布局时监听屏幕尺寸;

@keyframs:描述CSS动画帧;

@font-face:引入外部字体;

@import/@charset/@name space/@page/@supports/@document

选择器:

简单选择器:

    标签选择器: tag{ }
    类选择器:.className{ }
    id选择器: #id{ }
    通配符: *{ }
    属性选择器: [disabled]{ }/[type=button]{ }
               [class~="sports"]{ }   // 类名中包含sports,且以空格隔开;
               [lang|="en"]{ }        // 类名中包含en,且以“-”隔开;
               [href^="#"]{ }         // href属性值以 # 开头的元素;
               [href$="pdf"]{ }       // href属性值以 pdf 结尾的元素;
               [here*="lady"]{ }      // href属性值包含lady的元素;

伪类选择器:

    a:link{ }                 // 选中具有href的a标签样式;
    a:visited{ }              // 已访问过的链接的样式;
    a:hover{ }                // 当鼠标移上时的样式;
    a:active{ }               //  当鼠标点击时的样式;
    
    :enabled{ }  :disabled{ }   :chedcked{ }
    
    li:first-child{ }  li:last-child{ }       // 元素首项、末项
    li:nth-child(even){ }                     // 选中偶数项
    li:nth-child(3n+1){ }              // 选中正序第1、4、7。。。项
    li:nth-last-child(3n+1){ }         // 选中倒序第1、4、7。。。项
    
    li: only-child{ }                 // 选中作为唯一子元素的的li标签
    dd:first-of-type{ }              // 选中第一个dd类型的元素
    dd:last-of-type{ }               // 选中最后一个;
    dd:nth-of-type{ } 
    span: only-of-type{ }             // 选中同级元素只有一个span的<span>
    
    :empty{ }   :root{ }   :not(){ }  
    :target(){ }                // 选择器会突出显示当前活动的HTML锚;

组合选择器:

可以将简单选择器进行组合,如 img[src$="jpg"]{ };

伪元素选择器:

    ::first-letter{ };               /* 选择头字母;*/
    ::first-line{ };                 /* 选择首行;*/
    /* 插入内容;*/
    ::before{content:"before";}
    ::after{content:"after";}    
    /* 应用于被用户选中的内容 */
    ::selection{ }

后代选择器:

    <div class="main">
        <h2>111</h2>
        <div>
            <h2>222</h2>
            <p>333</p>
        </div>
    </div>
    
    .main h2{ }                     // 选中111、222;
    .main>h2{ }                     // 选中111

兄弟选择器:

    <div class="main">
        <h2>111</h2>
        <p>222</p>
        <p>333</p>
    </div>
    
    h2+p{ }               // 选中与h2相邻的p:222;
    h2~p{ }               // 选中h2同级之后的所有p:222,333;

选择器分组:

可以使用 ,讲选择器合并:

        h1,h2,h3{ };

CSS选择器优先级:

样式类型权重
a:行内样式1000
b:id选择器100
c:类、伪类和属性选择器10
d:标签和伪元素选择器1
value值 = a 1000 + b 100 + c* 10+ d ;

1、当value不等时,value值越大,则优先权更大;不同属性则合并,相同属性覆盖;
2、当value相等时,相同属性,后面的覆盖前面;不同属性合并;

改变CSS优先级:
1、通过改变CSS里的前后顺序;

2、提升选择器的value值;
3、加入 !important. (优先使用1、2);

文本与颜色:

字体大小

    font-size:<length>|<percentage>|<absolute-size>|<relative-size>    

<length>: 例如14px;
<percentage>: 例如200%/2em(2em/200% :表示为父级字体大小的2倍);
<absolute-size>:例如small、large;
<relative-size>: 例如smaller、larger;

字体

    font-family:[<family-name>|<generic-family>]#

字体族名称(family-name):是具体的字体名称, "Microsoft YaHei"

类族名称(generic-family):是字体类型名称而具体的字体则由浏览器决定,serif/sans-serif/cursive/fantasy/monospace等

  • font-family中设置的字体不会被浏览器自动下载, 字体是否可用则完全依靠用户电脑是否已安装该字体库而已;
  • 属性值必须以类族名称(generic-family)结尾确保字体会以正确的形式解析渲染;
  • 类族名称(generic-family)后的字体族名称(family-name)不会生效;

字体粗细;

    font-weight:normal|bold|bolder|lighter|100|200...

斜体;

    font-style:normal|italic|oblique

行高;

    line-height:normal|<number>|<length>|<percentage>

设置linge-height:300%与设置line-height:3的区别:

line-height:两行基线的间隔;
设置为300%时,直接以父元素的字体大小计算后继承,不管子元素自身的字体大小;既为父元素字体大小的3倍;(先计算后继承,为静态值)
设置为3时,则是动态的根据子元素自身的字体大小乘以3;(先继承后计算,为动态值,会自适应);

利用line-height让多行文本垂直居中:

在文本的后面添加个空白元素,设置其line-height和父元素高度一致,并在文本上设置vertical-align:middle;

字体组合样式:

    // font:italic bolid 20px/1.5 arial,serif;
    font:[<font-style>||<font-weight>]?<font-size>[/<line-height>]?<font-family>

字体颜色:

    color:red;
    color:#ff0000;
    color:rgb(255,0,0);
    color:rgba(255.0.0.1)

对齐:

水平对齐:左对齐/右对齐/居中/两端对齐

    text-align:left|right|center|justify

垂直对齐:

    vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom|<percentage>|<length>

文本缩进:

    text-indent:<length>|<pencentage>

换行,空格,自动换行:

    white-space:normal|nowrap|pre|pre-wrap|pre-line

normal: 换行符、空格合并,自动换行;
nowrap:换行符、空格合并,不自动换行;
pre:换行符、空格保留,不自动换行;
pre-wrap:换行符、空格保留,自动换行;
pre-line:换行符保留、空格/tab合并,自动换行;

单词换行:

    word-wrap:normal|break-word;
    word-break:normal|keep-all|break-all;

文字阴影:

    text-shadow:none|[<length>{2,3}&&<color>?]#;
    text-decoration:none|[underline||overline||line-through];

隐藏文本,且用省略号显示:

    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;

定义鼠标形状:

    // 自定义|自适应|鼠标|消失|疑问|点击|放大|缩小|移动
    cursor:[<url>]*,[auto|default|none|help|pointer|zoom-in|zoom-out|move];

强制继承: inherit;

盒模型:

    // min-width,max-width用法一致;
    width:<length>|<percentage>|auto|inherit;
    // min-width,max-width用法一致;
    height:<length>|<percentage>|auto|inherit;
    
    // 顺序为 上,右,下,左
    padding:[<length>|<percentage>]{1,4};
    margin:[<length>|<percentage>|auto]{1,4};

边框:

    border:[<border-width>||<border-style>||<border-color>];
    border-width:[<length>]{1,4};
    //             实线|虚线|点
    border-style:[solid|dashed|dotted]{1,4};
    border-color:[<color>|transparent]{1,4};

圆角边框:

    border-radius:[<length>|<percentage>]{1,4}[/[<length>|<pencentage>]{1,4}]?
    //                  水平半径     /     垂直半径
    border-radius: 0px 5px 10px 15px/20px 15px 10px 5px;
    border-top-left-radius:5px;

设置超出部分的样式:

    //   overflow-x|overflow-y;
    //         可见|隐藏|出现滚动条|自动显隐滚动条;
    overflow:visible|hidden|scroll|auto;

切换盒子模型模式:

    box-sizing:content-box|border-box|inherit;

盒阴影:

    box-shadow:none|<shadow>[,<shadow>]*
    <shadow>:inset?&&<length>{2,4}&&<color>?
    //水平偏移 垂直偏移 模糊半径 阴影大小 阴影颜色;
    box-shadow:4px 6px 3px 3px red;
    //  内阴影
    box-shadow:inset 0px 0px 5px red;

轮廓:

    outline:[<out-width>||<outline-style>||<outline-color>];
    outline-width:<length>;
    outline-style:solid|dashed|dotted;
    outline-color:<color>|invert;

与border值较为相似,但有两点区别:
1、border占据空间,而outline并不占据空间;
2、outline在border的外围;

背景(位于盒模型的最底层):

    background-color:<color>;
    background-image:<bg-image>[,<bg-image>]*
    <bg-image> :<image>|none;

Tips:
1、绝对路径:“http://....”;
2、相对路径,相对于根目录,CSS文件是相对于CSS文件,JS文件是相对于HTML的文件,..代表上一级:"../images/x.png" ;

背景平铺方式:

    background-repeat:<repeat-style>[,>repeat-style>]*
    //             X方向重复|Y方向重复|重复|留空隙平铺|伸缩铺满
    <repeat-style>:repeat-x|repeat-y|[repeat|space|round|no-repeat]{1,2};
    //  x轴不重复,y轴重复
    background-repeat:no-repeat repeat;

背景固定方式:

    background-attachment:<attachment>[,<attachment>]*
    //           背景随滚动而滚动|背景固定|继承
    <attachment>:scroll|fixed|inherit;

背景图片位置:

    background-position:<position>[,<position>]*
    <position>:left|center|right|top|bottom|<percentage>|<length>

background-position:10px 20px; 表示x轴偏移10px,y轴偏移20px;
background-position:20% 50%; 表示相对于父元素的定位;
background-position: center center; 图片居中;
background-position:right; 水平靠右,垂直居中;
background-position:right 10px top 20px; 与右边偏10px ,与上边偏20px;

常用的背景属性:

    background:url("x.png" ) no-repeat 10px 10px;

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!

支持一下呗!Y(・∀・)Y
  • QQ
  • AliPay
  • WeChat

评论已关闭

  Timeline:成长

成长就是要多学、多问、多看、多记

updated on :

  关于博主

blog名-小优,平时喜欢跑步,喜欢听一些温柔,轻松的音乐,喜欢接触新事物,对自己的能力有一个很好的认知,人生在于折腾,一寸光阴一寸金,寸金难买寸光阴!我就是我,颜色不一样的烟火!

  近期评论

生活其实很简单,过了今天就是明天。

低头哭过别忘了抬头继续走。

不要被任何人打乱自的脚步,因为没有谁会像你一样清楚和在乎自己梦想。

没有人可以打倒我,除非我自己先趴下!

你要记住你不是为别人而活,你是为自己而活。