Web前端笔记 - CSS CSS3笔记 - 《编程常用》

0.兼容
@import和link的区别
1.背景:background
2.文本:text
3.文字:font
4.边框和轮廓：border
5.对元素的常用操作
6.组合选择符
7.伪元素和属性选择器
8.多媒体查询
**以上是初学必须掌握**
**以下不会用别说会CSS3**

:::info 层叠样式表：描述HTML文本样式的语言。
c这里仅记录一下常用样式的一些用法和说明。 :::

0.兼容

@import和link的区别

link：html方式，能定义Rss和rel链接属性等，页面加载时同步加载，所有浏览器都支持，不存在兼容性问题
import：CSS方式，只能用于CSS，，能在CSS中引入，引用必须放在所有样式之前，页面加载完成后才加载，css2.0出现不支持IE5以下

1.背景:background

/*写法：常用复合写法*/
background：#ff9900 url('') no-repeat  center/50%
/*写法：多张图片复合写法*/
background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
/*写法：同时多张背景图：以逗号分隔*/
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
opacity: 0.3;/*透明*/
/*说明：复合写法参数顺序及说明*/
background:
  [background-color]                             /*背景颜色,none(没有颜色)|transparent(透明)|色值*/
  [background-image]                             /*背景图片*/
  [background-repeat]                            /*是否重复*/
  [background-attachment]                  /*背景图固定或跟随滚动,默认：scroll(跟随)|fixed(不跟随)*/
  [background-position] /            /*背景图位置:固定值、百分比、字母属性*/
  [background-size]                                /*背景图大小：auto|固定值|百分比|cover(平铺：图片会被裁剪，不变形）|contain:(缩放最大尺寸:图片缩放为最大尺寸，不被裁剪或变形)*/
  [background-origin]                         /*背景图片开始位置：默认：padding-box(从padding结束开始)|border-box(从边框结束开始)|centent-box(从内容开始)*/
  [background-clip];                            /*背景的绘制位置：默认：padding-box(从border之内开始)|border-box(包含border开始)|centent-box(从padding结束开始)*/
/*写法：背景渐变*/
background-image:linear-gradient(90deg, red, yellow)：                                             /*线性渐变：(角度方向,颜色1，颜色2)*/
background-image: repeating-linear-gradient(90deg,red, yellow 10%);                      /*线性重复渐变：(角度,颜色1， 颜色2 大小占比)*/
background-image:radial-gradient(circle, red, yellow)：                                             /*径向渐变：(默认ellipse(椭圆) |circle(圆) 颜色1，颜色2)*/
background-image:repeating-radial-gradient(,red, yellow 10%);                                   /*径向重复渐变：(颜色1 ，颜色2 大小占比)*/

2.文本:text

/*写法：超出文本显示省略号*/
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;          /*几行:不规范的css3属性，所以找不到*/
-webkit-box-orient: vertical;        /*不规范的css3属性，所以找不到*/
/*写法：文本修饰：扩展写法：红色波浪或虚上下中划线*/
text-decoration：underline overline line-through wavy/dotted red
/*说明：常用属性说明*/
{text-align:}         /*水平对齐方式：默认：left(左)|right(右)|justify(两侧)justify要结合text-align-last: justify使用*/ 
{vertical-align:}       /*垂直对其方式：默认：top(上)|moblie(中)|bottom(下)|text-top(父元素字体顶端)|text-bottom(父元素字体底端)*/
{line-height:}        /*行高*/
{direction:}                     /*文字方向：默认:ltl(左)|rtl(右)    */                     
{letter-spacing:}         /*字符间隔：字符之间的间距*/          
{word-spacing:}                /*字间隔：文字中间空格的大小*/ 
{text-indent:}                /*段落缩进:数值*/
{text-shadow:}                /*文字投影：X Y 偏移量 颜色*/
{white-space:}                /*空白处理：默认:normal(忽略空白)|nowrap(不换行):*/  
{word-wrap:}                    /*强制换行：默认：normal|break-word(字母数字也强制换行)*/ 
{word-break:}                    /*强制换行：默认：normal|break-word(允许单词换行)|break-all(必须在标点符号处换行)*/ 
{text-overflow:}             /*文字溢出显示方式:默认：clip(裁剪)|ellipsis(省略号)*/             
{text-transform:}            /*英文处理：默认：none(无)|capitalize(首字母大写)|uppercase(全部大写)|lowercase(全部小写)*/
{text-decoration:}        /*文本修饰：默认：none(无)|underline(下划线)|overline(上划线)|line-through(删除线)*/

3.文字:font

/*写法：自定义引用字体*/
@font-face{
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}
div{
  font-family:myFirstFont;
}
/*说明：常用属性*/
{font-weight:}         /*字体粗细: */             
{font-style:}            /*字体样式：默认：normal(正常)|italic(斜体)*/
{font-stretch:}        /*文字拉伸：用得少，但是可能会有变态需求*/

4.边框和轮廓：border

/*写法：复合写法*/
border:10px dotted|dashed|solid red 
/*写法：边框图片复合写法*/
border-image: url(border.png) 30 20 10 20 stretch;
/*说明：复合写法参数说明*/
border:
  [border-width]
  [border-style]      /*边框样式:常用：solid(实线)|dotted(虚线)|dashed(点线)还有3D可以看文档*/
  [border-color]
/*说明：复合写法参数说明*/
border-image:
  [border-image-source]        /*图片路径*/
  [border-image-slice]        /*固定四个角之后：低于50%，就开始绘制四个边除了四个角的边框*/
  [border-image-width]        /*图片宽度，一般不用管都是结合border-width使用*/
  [border-image-outset]        /*框外部绘制的量：固定值|倍数:这个使用比较少*/
  [border-image-repeat]   /*图像边界，否应重复（repeated）|拉伸（stretched）|铺满（rounded）*/
/*说明：常用其他属性*/
{border-radius:}   /*圆角*/
{box-shadow:}             /*投影:X Y 偏移量 颜色*/
{box-shadow:}             /*投影:X Y 偏移量 颜色*/
{outline:}                 /*轮廓就是边框外面的，属性差不多，可以理解成边框的边框，做个了解就好，*/

5.对元素的常用操作

{padding:}                /*内边距：上下左右*/
{margin:}                  /*外边距：上下左右:值可以是auto*/
{overflow:}            /*溢出控制滚动条：默认：visible(溢出)|hidden(溢出隐藏)|scoll(出现滚动条)|auto(如果出现裁剪才出现滚动条)*/
{box-sizing:}          /*元素总高度计算：默认：content-box(边框、内边距都不算)|border-box(边框、内边距都算)*/
{box-shadow:}            /*投影：X Y 偏移量 颜色*/
/*写法：卡片投影*/
box-shadow:} 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/*写法：float浮动复合写法*/
{float:}            /*left(左)|right(右)|none(无)*/
{clear:}            /*both:清除浮动*/
/*写法：position定位写法*/
{position:}                                             /*relative(绝对定位)|absolute(相对)|fixed(相对窗口)|sticky(粘性定位)*/
{top、left、right、bottom:}            /*上下左右边距*/
{z-index:}                            /*层级*/
/*写法：用户自定义元素宽高*/
{resize:}              /*默认：none(无法调整)|both(用户自定义调整宽高)|horizontal(只能宽度)|vertical(只能高度)*/
/*写法：元素设置和隐藏*/
{display:}             /*none(隐藏不占位置)|block(以块元素展示)|inline(以内联元素展示)|inline-block(两者之间显示)|table(以表格形式展示)*/
{visibility:}         /*hidden(隐藏但位置还在)：元素设置和隐藏*/
/*写法：css定义一个变量*/
{--bg:#FFFFFF}
{color:var(--bg)}        /*定义一个变量：--名称：值;调用一个变量var(--名称)*/
/*写法：content获取一个属性值并且输出出来*/
{div:after(content:("attr(属性)"))}

6.组合选择符

div.class      /*包含class的div*/
div .class   /*div里所有的class*/
div>.class   /*div的下一级的class*/
div+.class   /*div相连兄弟元素的下一个的class*///
div~.class   /*div的兄弟元素的所有class*/

7.伪元素和属性选择器

:root                                      /*根目录*/
a:link                                    /*没有访问的链接*/
a:visited                                /*访问过的链接*/
a:active                                /*鼠标点击的链接*/
a:hover                                    /*鼠标悬浮的链接*/                
div:not(p)                            /*div里除了p意外的元素*/
p:first-letter                    /*p里面的第一个字母*/
p:first-line                        /*p里面的第一行*/
p:first-child                        /*第一个p元素*/
p:before                                /*p元素之前：里面必须有content*/
p:after                                    /*p元素之后:里面必须有content*/
p:lang(it)                            /*元素lang属性为it的元素*/
p:nth-child(2)                    /*第二个P元素odd(奇数)|even(偶数)|公式3n+1(三个一循环从第一个开始)*/
p:nth-last-child(2)            /*倒数第二个P元素*/
input:valid                            /*有效值的input元素*/
input:invalid                        /*无效值的input元素*/
input:focus                            /*具有焦点的input元素*/
p[属性=值]                                /*属性值的P元素*/
p[属性~=值]                            /*属性包含值的P元素,必须独立单词*/
p[属性|=值]                            /*属性以值开头的P元素，必须是唯一单词或者-分割*/
p[属性^=值]                            /*属性以值开头的P元素，几个字母也行*/
p[属性$=值]                            /*属性以值结尾的P元素，几个字母也行*/
p~ul                                        /*同一个父元素内,p元素后面所有的兄弟ul*/
p+ul                                        /*同一个父元素内,p元素后第一个兄弟ul*/    
p>ul                                        /*P元素里第一级所有的ul元素*/
p,ul                                        /*p元素和ul元素*/

8.多媒体查询

/*写法：屏幕480px像素以内显示，以外显示用min-width*/
@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
/*写法：屏幕960到1199像素显示*/
@media screen and (min-width: 960px) and (max-width: 1199px) {
    #page{ width: 960px; }#content,.div1{width: 650px;}#secondary{width:250px}select{max-width:200px}
}
/*写法：520到699及1151以上显示*/
@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}

以上是初学必须掌握

以下不会用别说会CSS3

1.计数器

/*写法：计数器*/
counter-reset：名字              /*创建重置一个计数器：起个名字*/
:before{
  counter-increment:名字;    /*使用计数器*/
  content:counter(名字)        /*输出计数*/
}

2.2D转换

/*写法：复合写法,这个不大常用，直接用下面单条属性就行*/
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
/*说明：参数说明*/
transform:
  [translate()]    /*根据XY轴位移：(X数值，Y数值)*/
  [rotate()]             /*旋转：(角度)*/
  [scale()]                 /*根据XY轴缩放：(X倍数,Y倍数)*/
  [skew()]                 /*根据XY轴倾斜：(X角度,Y角度)*/
/*兼容写法*/
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
/*这里就是常用简单用法，对动画特效比较钟爱建议去好好看看文档*/

3.3D转换

/*写法：复合写法,这个不大常用，直接用下面单条属性就行*/
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
/*说明：参数说明*/
transform:
  [rotateX()]    /*根据X轴旋转：(角度)*/
  [rotateY()]         /*根据Y轴旋转：(角度)*/
/*兼容写法*/
 transform: rotateY(130deg);
 -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */
/*这里就是常用简单用法，对动画特效比较钟爱建议去好好看看文档*/

4.过渡

/*写法：复合写法,这个不大常用，直接用下面单条属性就行*/
transition:all 2s ease 1s| width 2s ease 1s, height 2s ease 1s, transform 2s ease 1s;
/*说明：参数说明*/
transition:
  [transition-property]                /*对应属性：css属性懒得挨个写直接all*/
  [transition-duration]                  /*完成时间*/
  [transition-timing-function]    /*转速曲线:linear(匀速)|ease(先慢后快)|cubic-bezier(n,n,n,n)(自己定义)，*/
  [transition-delay]                        /*开始时间*/
/*兼容写法*/
  -webkit-transition: width 2s; /* Safari */

5.动画

/*写法*/
/*1.起名字然后写上开始效果和结束效果*/
@keyframes myfirst{
    from {background: red;}
    to {background: yellow;}
  /*也可以自己设置动画中间间隔*/
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
/*2.调用动画效果*/
div{
    animation-name: myfirst;                                    /*效果名称*/
    animation-duration: 5s;                                        /*持续时间*/
    animation-timing-function: linear;                /*转速曲线:linear(匀速)|ease(先慢后快)|cubic-bezier(n,n,n,n)(自己定义)，*/
    animation-delay: 2s;                                            /*开始时间*/
    animation-iteration-count: infinite;            /*播放次数：次数|infinite(无限次)*/
    animation-direction: alternate;                        /*是否交替播放:默认：normal(正常)|reverse(倒放)|alternate(奇数正、偶数倒)|alternate-reverse(反之)*/
    animation-play-state: running;                        /*指定动画是否暂停：默认：running(运行)，paused(暂停)*/
}
/*兼容写法*/
@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}
   -webkit-animation: myfirst 5s; /* Safari 与 Chrome */

6.多列显示

column    /*指定元素应该被分割:列数|宽度 */
column-width        /*指定列的宽度就不用上面的列数了 */
column-gap    /*指定列与列之间的间隙 */
column-rule    /*间隔分割线：宽度 线条 颜色，所有 column-rule-* 属性的简写 */
column-span    /*指定元素要跨越多少列，可以是all整行 */

7.flex弹性布局

/*写法：1.声明模块为弹性布局：注意内容为动态生成情况下，flex可能不生效*/
display: -webkit-flex;
display: flex;
/*写法：2.其他说性说明*/
/*在父级可以设置的属性*/
flex-flow: <flex-direction> || <flex-wrap> /*复合写法*/
flex-direction        /*项目排列方向设置主轴：row(列展示) | row-reverse(倒列展示) | column(行展示) | column-reverse(倒行展示)*/
flex-wrap                 /*是否换行：默认：nowrap(不换行) | wrap(换行) | wrap-reverse(换行倒序)*/
justify-content        /*主轴上对齐方式： 默认；flex-start(开始位置) | flex-end(结束位置) | center(中间位置) | space-between(两侧对齐) | space-around(等间隔排列);*/
align-items                /*辅轴对齐方式：默认flex-start(开始位置)  | flex-end(结束位置) | center(中间位置) | baseline(内容对齐) | stretch(项目元素拉伸一般高);*/
align-content            /*同时设置两条轴线但是有一条不好用就都不好用：默认flex-start(开始位置)  | flex-end(结束位置) | center(中间位置) | space-between(四周对齐) | stretch(四轴拉伸)|space-around(等间隔排列);*/
/*在子元素可以设置的属性*/
order：                  /*排列：值越小越靠前排列*/
align-self            /*单个项目排列：默认auto(自动) | flex-start(开始) | flex-end(结束) | center(居中) | baseline(内容对齐) | stretch(拉伸);*/
flex: none | [ <'flex-grow'> <'flex-shrink'> <'flex-basis'> ]     /*复合写法：auto (1 1 auto) | none (0 0 auto)。*/
flex-grow:            /*放大比例*/
flex-shrink            /*缩小比例*/
flex-basis:            /*所占空间：类似width*/

8.网格化布局

/*写法：1.声明模块为网格布局*/
display:grid;  /*设置容器：grid(块元素网格)|inline-grid(内联网格);*/
/*写法：2.其他说性说明*/
grid-template-columns: 100px 100px 100px;       /*行宽度 */
grid-template-rows: 100px 100px 100px;                /*列宽度 */
/*建议写法：auto(自己决定)|repeat(3, 33.33%)(三次每次都是33.33)|repeat(auto-fill, 100px)(每个大小100，随着父级宽度排列)|fr(倍数 ：后者是前者的倍数)|minmax(100px, 1fr)(最大最小值);*/
grid-gap: <grid-row-gap> <grid-column-gap> /*复合写法*/;
grid-row-gap: 20px;                /*列间隔*/
grid-column-gap: 20px;        /*行间隔*/
/*写法：网格各个的名字*/
grid-area: myArea;
grid-template-areas: 'myArea myArea myArea myArea myArea';
/*合并*/
grid-column: 2 / span 3;
grid-column-start: 1;    /*行从第一条线开始*/
grid-column-end: 3;        /*行从第三条线开始*/
grid-row-start: 1;        /*列从第一条线开始*/
grid-row-end: 3;            /*列从第三条线开始*/
grid-auto-flow: ;     /*row(从行后列)|column(先列后行)|row dense|column dense*/
place-content: <align-content> <justify-content>/*复合写法*/
justify-content            /*整个单元在容器位置 start | end | center | stretch | space-around | space-between | space-evenly;*/
align-content:                 /*整个单元在容器位置 start | end | center | stretch | space-around | space-between | space-evenly;*/
/*设置在单元上*/
place-items: <align-items> <justify-items>; /*复合写法*/
justify-items               /*左中下:start | end | center | stretch;*/
align-items                     /*上中下:start | end | center | stretch;*/
/*设置在单个单元上*/
place-self: <align-self> <justify-self>;
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
/*写法：传统12格布局*/
grid-template-columns: repeat(12, 1fr);

CSS CSS3笔记

0.兼容

@import和link的区别

1.背景:background

2.文本:text

3.文字:font

4.边框和轮廓：border

5.对元素的常用操作

6.组合选择符

7.伪元素和属性选择器

8.多媒体查询

**以上是初学必须掌握**

**以下不会用别说会CSS3**

1.计数器

2.2D转换

3.3D转换

4.过渡

5.动画

6.多列显示

7.flex弹性布局

8.网格化布局

以上是初学必须掌握

以下不会用别说会CSS3