本文最后更新于 2023-08-04,文章内容可能已经过时。

引入:

  • 外部样式:
	<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;