当前位置：文档之家 › 基本CSS知识点大全

基本CSS知识点大全

  • 格式：doc
  • 大小：52.00 KB
  • 文档页数：6

Transform：rotateX/rotateY/rotateZ(360deg);deg为角度值；元素绕x，y，z轴旋转360度；rotate（20deg）元素顺时针旋转20度（以左下角为轴）；rotate3d(x,y,z,angle)定义3d转换；注：括号中的值均可为负值；Transform：translate（50px,100px）；元素右移50像素，下移100像素；translateX（）、translateY（）、translateZ（）元素沿x轴，y轴，z轴变动；Transform：scale（）；scale(2,4) 把宽度转换为原始尺寸的2 倍，把高度转换为原始高度的4 倍。

scale3d(x,y,z)定义3d缩放；scaleX（2）、scaleY（2）、scaleZ（2）、沿x,y,z放大两倍；Transform：skew（）；skew(30deg,20deg) 围绕X 轴把元素翻转30 度，围绕Y 轴翻转20 度。

skew(x-angle,y-angle)、skewX(angle)、skewY(angle)，沿着x，y倾斜转换；Transform：mrtrix（）；matrix(0.866,0.5,-0.5,0.866,0,0) 使用matrix 方法将元素旋转30 度;Animation：动画名称完成时间速度曲线开始时刻（默认0）播放次数（默认1）；Transition：property duration timing-function delay; transition:width 2slinear 3s;事件触发后3秒，宽度匀速变化2秒；下面是速度曲线图：linear 规定以相同速度开始至结束的过渡效果（等于cubic-bezier(0,0,1,1)）。

ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。

ease-in 规定以慢速开始的过渡效果（等于cubic-bezier(0.42,0,1,1)）。

ease-out 规定以慢速结束的过渡效果（等于cubic-bezier(0,0,0.58,1)）。

ease-in-out 规定以慢速开始和结束的过渡效果（等于cubic-bezier(0.42,0,0.58,1)）。

cubic-bezier(n,n,n,n) 在cubic-bezier 函数中定义自己的值。

可能的值是0 至1 之间的数值。

Box-orient：子元素横向排列box-orient:horizontal; 子元素纵向排列box-orient:horizontal;Box-pack：横向排列时子元素从起始位置对齐box-pack:start; 横向排列时子元素居中对齐box-pack:center; 横向排列时子元素从结束位置对齐box-pack:end; 横向排列时子元素两端对齐box-pack:justify; 纵向排列也一样。

box-flex：<number>使用浮点数指定对象所分配其父元素剩余空间的比例。

box-direction：normal | reverse，normal：设置弹性盒模型对象的子元素按正常顺序排列；reverse：反转弹性盒模型对象的子元素的排列顺序。

box-lines：single | multiple，single：弹性盒模型对象的子元素只在一行内显示，multiple：弹性盒模型对象的子元素超出父元素的空间时换行显示overflow-x：<overflow-style>visible：不剪切内容。

默认；hidden：将超出对象宽度的内容进行裁剪，将不出现滚动条。

scroll：将超出对象宽度的内容进行裁剪，并以滚动条的方式显示超出的内容。

auto：在需要时剪切内容并添加滚动条，此为body对象和textarea的默认值。

background：[ background-image ] || [ background-repeat ] ||[ background-attachment ] || [ background-position ]相关属性：[ background-origin ] || [ background-clip ] || [ background-size ] [ background-image ]：指定对象的背景图像。

可以是真实图片路径或使用渐变创建的“背景图像”[ background-repeat ]：指定对象的背景图像如何铺排填充。

[ background-attachment ]：指定对象的背景图像是随对象内容滚动还是固定的。

[ background-position ]：指定对象的背景图像位置。

[ background-origin ]：指定对象的背景图像显示的原点。

padding-box：从padding区域（含padding）开始显示背景图像。

border-box：从border区域（含border）开始显示背景图像。

content-box：从content区域开始显示背景图像。

[ background-clip ]：指定对象的背景图像向外裁剪的区域。

padding-box：从padding区域（不含padding）开始向外裁剪背景。

border-box：从border区域（不含border）开始向外裁剪背景。

content-box：从content区域开始向外裁剪背景。

text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。

[ background-size ]：指定对象的背景图像的尺寸大小。

background：[ background-image ] || [ background-repeat ] || [ background-attachment ] || [ background-position ]Multiple background 属性：background:url(skin/image1.jpg) no-repeat scroll 10px 20px,url(skin/image1.jpg) no-repeat scroll 50px 60px,url(skin/image1.jpg) no-repeat scroll 90px 100px;三个图片当做背景。

Text-shadow:水平位移垂直位移模糊值颜色；text-shadow:1px 1px rgba(0,0,0,.3)；普通文字阴影text-shadow:1px 1px 1px rgba(0,0,0,.3);模糊文字阴影效果text-shadow:1px 1px 0 rgba(255,255,255,1),1px 1px 2px rgba(0,85,0,.8);双重模糊文字阴影效果Text-stroke：描边厚度，描边颜色；text-transform：none | [ [ capitalize | uppercase | lowercase ] || full-width || full-size-kana ]，字体转换columns：列宽列数；column-gap：列距；默认为16px；column-fill：auto | balanceauto：列高度自适应内容balance：所有列的高度以其中最高的一列统一column-rule：[ column-rule-width ] || [ column-rule-style ] || [ column-rule-color ][ column-rule-width ]：设置或检索对象的列与列之间的边框厚度。

[ column-rule-style ]：设置或检索对象的列与列之间的边框样式。

[ column-rule-color ]：设置或检索对象的列与列之间的边框颜色。

transform-origin：设置或检索对象以某个原点进行转换。

该属性提供2个参数值。

如果提供两个，第一个用于横坐标，第二个用于纵坐标。

如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。

@keyframes <identifier> '{' <keyframes-blocks> '}';指定动画名称和动画效果。

<keyframes-blocks>：[ [ from | to | <percentage> ]{ sRules } ] [ [ , from | to | <percentage> ]{ sRules } ]*<identifier>：identifier定义一个动画名称<keyframes-blocks>：定义动画在每个阶段的样式，即帧动画。

@keyframes定义的动画名称用来被animation-name所使用。

定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态：RGBA(R,G,B,A)取值：R：红色值。

正整数| 百分数，G：绿色值。

正整数| 百分数，B：蓝色值。

正整数| 百分数，A：Alpha透明度。

取值0~1之间。

HSL(H,S,L)：三个值分别是色调，饱和度，亮度；HSLA(H,S,L,A)；四个值分别是色调，饱和度，亮度，透明度；<linear-gradient>：linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+);用线性渐变创建图像。

<point>：[ left | right ]? [ top | bottom ]? || <angle>?<color-stop>：<color> [ <length> | <percentage> ]?取值：<point>left：设置左边为渐变起点的横坐标值。

right：设置右边为渐变起点的横坐标值。

top：设置顶部为渐变起点的纵坐标值。

bottom：设置底部为渐变起点的纵坐标值。

<angle>：用角度值指定渐变的方向（或角度）。

<color-stop>：指定渐变的起止颜色。

<color-stop><color>：指定颜色。

请参阅颜色值<length>：用长度值指定起止色位置。

不允许负值<percentage>：用百分比指定起止色位置。

合集下载

CSS媒体查询知识点

CSS媒体查询知识点

CSS媒体查询知识点CSS媒体查询是一种在网页设计中常用的技术，通过媒体查询可以根据设备的特性来适配网页的样式和布局。

本文将介绍CSS媒体查询的基本概念、语法和常见应用，帮助读者更好地理解和运用这一技术。

一、基本概念CSS媒体查询是一种CSS3新增的特性，用于根据设备的特性或特定的媒体类型来应用不同的CSS样式。

媒体查询提供了一种响应式布局的解决方案，使得网页可以在不同的设备上展现出最佳的视觉效果。

二、语法媒体查询的语法如下所示：@media mediatype and (condition) {CSS rules;}其中，mediatype表示媒体类型，condition表示条件，CSS rules表示需要应用的CSS样式。

常用的媒体类型包括：1. all：所有设备2. screen：屏幕设备，如计算机、平板电脑3. print：打印机和打印预览4. speech：屏幕阅读器等语音合成器常用的条件包括：1. width：设备的宽度2. height：设备的高度3. orientation：设备的方向（横向或纵向）4. device-aspect-ratio：设备的宽高比5. resolution：设备的分辨率三、常见应用媒体查询在网页设计中有着广泛的应用，以下是几个常见的应用示例：1. 自适应布局媒体查询可以根据设备的宽度来调整网页的布局。

通过设置不同的CSS样式，可以实现在不同设备上展示不同的版面结构和元素排列方式，从而达到适应不同屏幕大小的效果。

2. 响应式图片在响应式网页设计中，媒体查询可以根据设备的分辨率来动态加载适应当前设备的不同大小的图片。

通过设置不同分辨率的图片资源，可以提升网页的加载速度和用户体验。

3. 打印样式通过媒体查询，可以为打印设备单独定义样式，使打印的页面排版更加合适。

例如，可以设置打印时隐藏导航栏和广告等不必要的元素，并调整字体大小和行间距等，以保证打印输出的质量。

CSS超全笔记（适合新手入门）

CSS超全笔记（适合新手入门）

CSS超全笔记（适合新⼿⼊门）CSSCSS初识CSS(Cascading Style Sheets) 美化样式CSS通常称为CSS样式表或层叠样式表（级联样式表），主要⽤于设置HTML页⾯中的⽂本内容（字体、⼤⼩、对齐⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局等外观显⽰样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜⾊、背景的控制及整体排版等，⽽且还可以针对不同的浏览器设置不同的样式。

引⼊CSS样式表（书写位置）CSS可以写到那个位置？是不是⼀定写到html⽂件⾥⾯呢？内部样式表内嵌式是将CSS代码集中写在HTML⽂档的head头部标签中，并且⽤style标签定义，其基本语法格式如下：<head><style type="text/CSS">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head>语法中，style标签⼀般位于head标签中title标签之后，也可以把他放在HTML⽂档的任何地⽅。

type="text/CSS" 在html5中可以省略，写上也⽐较符合规范，所以这个地⽅可以写也可以省略。

⾏内式（内联样式）内联样式，⼜有⼈称⾏内样式、⾏间样式、内嵌样式。

是通过标签的style属性来设置元素的样式，其基本语法格式如下：<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>语法中style是标签的属性，实际上任何HTML标签都拥有style属性，⽤来设置⾏内式。

其中属性和值的书写规范与CSS样式规则相同，⾏内式只对其所在的标签及嵌套在其中的⼦标签起作⽤。

外部样式表（外链式）链⼊式是将所有的样式放在⼀个或多个以.CSS为扩展名的外部样式表⽂件中，通过link标签将外部样式表⽂件链接到HTML⽂档中，其基本语法格式如下：<head><link href="CSS⽂件的路径" rel="stylesheet" /></head>注意： link 是个单标签哦该语法中，link标签需要放在的三个属性head头部标签中，并且必须指定link标签，具体如下：href：定义所链接外部样式表⽂件的URL，可以是相对路径，也可以是绝对路径。

css教程菜鸟

css教程菜鸟

css教程菜鸟CSS（层叠样式表）是一种用于描述网页上的元素布局和样式的语言，它能够使网页更加美观和易于阅读。

本文将介绍一些CSS的基础知识和常用属性，以帮助菜鸟入门。

首先，让我们了解一下CSS的基本语法。

CSS由选择器和声明块组成。

选择器指定了要应用样式的HTML元素，而声明块则包含了一系列属性-值对，用于描述要应用到元素上的样式。

下面是一个简单的示例：```p {color: red;font-size: 20px;}```上述代码中，选择器“p”表示要应用样式的HTML段落元素。

声明块中的属性-值对指定了段落的文本颜色为红色，字体大小为20像素。

接下来，我们将介绍一些常用的CSS属性。

1. 字体属性：用于设置文本的字体样式，如字体大小、字体族等。

例如：```p {font-size: 16px;font-family: Arial, sans-serif;}```上述代码将段落的字体大小设置为16像素，字体族为Arial或者sans-serif。

2. 背景属性：用于设置元素的背景样式，如背景颜色、背景图片等。

例如：```body {background-color: lightblue;background-image: url("bg.jpg");}```上述代码将页面的背景颜色设置为浅蓝色，背景图片为名为“bg.jpg”的图片。

3. 边框属性：用于设置元素的边框样式，如边框宽度、边框颜色等。

例如：```div {border: 1px solid black;}```上述代码将`<div>`元素的边框宽度设置为1像素，边框颜色为黑色。

4. 盒模型属性：用于调整元素的尺寸和定位，如元素的宽度、高度、外边距等。

例如：```img {width: 200px;height: 150px;margin-top: 10px;}```上述代码将图片的宽度设置为200像素，高度设置为150像素，并且向上外边距10像素。

CSS知识点总结

CSS知识点总结

CSS知识点总结⼀．Css分类1.替代replaced elements:img input(radio button, checkbox, text)不可替代nonreplaces elements:html,xhtml,span,a,div,body,form,p,em,strong,2.block-level and inline-level:(block可以包含inline 元素，反过来是不可以的！) block-level:p div li ulinline-level: a span strong em b i u⼆．选择器2.元素选择器：P{}3. Grouping Selectors(分组)eg:h2, p {color: gray;}4.The universal selector（通配选择器）eg:* {color: red;}5. Grouping Declarationseg:h1 {font: 18px Helvetica; color: purple; background: aqua;}6.类选择器：.ddd7.ID选择器：#ddd8.属性选择器简单属性选择h1[class] {color: silver;}根据具体属性值p[class="warning"] {font-weight: bold;}根据部分属性值选择p[class~="warning"] {font-weight: bold;}⼦串匹配属性选择器[foo^="bar"][foo$="bar"][foo*="bar"]特定属性选择类型*[lang|="en"] {color: white;}9.使⽤⽂档结构后代选择器blockquote b, p b {color: gray;}选择⼦元素h1 > strong {color: red;}选择相邻兄弟元素h1 + p {margin-top: 0;}10.伪类选择器静态伪类：a:visited{}a:link{}(好像⽤不了)动态伪类：a:focus{}(常⽤于input元素)a:hover{}a:active{}选择第⼀个⼦元素：Li:first-child{}根据语⾔选择（）*:lang(fr){}结合伪类：link:hover:active {color: orange;}伪元素选择器：设置⾸字母样式li:first-letter{ color:Red;设置第⼀⾏的样式：.aa:first-line{ color:Purple;}设置之前和之后元素的样式：a:before{ content:"{}"; color:Silver;}a:after{ content:"end"; color:Aqua;}三．结构和层叠1.特殊性：重要性：!Important (最强悍！) eg: p.dark {color: #333 !important; background: white;}内联样式特殊性：1000 ID选择器：0100 li#answer {color: navy;} /* 0,1,0,1 (winner) */类属性值，属性选择或伪类：0010 h2.grape{color: purple;}/* 0,0,1,1 (winner)*元素和伪元素：0001 h1 {color: red;} /* 0,0,0,1 */通配选择器：0000结合符:⽆继承：⽆（0特殊性⽐⽆特殊性的更强）Eg: * {color: gray;} (（当h1中有其他元素时win）h1#page-title {color: black;}2.继承a)Border：没有继承b)Body:可以向上继承到html,其他的都是向下继承3.层叠：具有相同特殊性的靠后的权重⼤按权重和来源排序：（p79）读者的重要声明>创作⼈员的重要声明>创作⼈员的正常声明>读者正常>⽤户代理声明按特殊性排序按顺序排序Lvha顺序⽐较重要：即live visited hover active四．值和单位1.数字2.百分数3.颜⾊命名颜⾊：blue green white red black maroon ...⽤GRB指定颜⾊函数式RGB颜⾊(百分数法：0%-100%，数字法：0-255)Eg:rgb(100%,100%,100%)rgb(0%,0%,0%)rgb(255,255,255)rgb(0,0,0)灰度表：p.one {color: rgb(0%,0%,0%);}p.two {color: rgb(20%,20%,20%);}p.three {color: rgb(40%,40%,40%);}p.four {color: rgb(60%,60%,60%);}p.five {color: rgb(80%,80%,80%);}p.six {color: rgb(0,0,0);}p.seven {color: rgb(51,51,51);}p.eight {color: rgb(102,102,102);}p.nine {color: rgb(153,153,153);}p.ten {color: rgb(204,204,204);}25%*255=63.75=64⼗六进制RGB颜⾊Web颜⾊：rgb值20%和52和33（⼗六进制）整除4.长度单位a)绝对长度单位：in,cm,mm,pt(点),pc（派卡）1in=2.54cm 1cm=0.3394in1 in=72pt 1 in=6pcB) 相对长度单位Em和ex:Px:1em=14px 1em=2exEm最好的度量单位5.URL绝对URL相对URL注意：url和开始括号之间不能有空格6.关键字None:不同于0，Inherit:它的属性值和⽗元素相同7.css2单位：p(110)a)⾓度值：deg, grad 和 radb)时间值：s,ms 1000ms=1sc)频率值：hz,mhz五．字体1.字体系列制定字体系列：p {font-family: TimesNR,serif;}p {font-family: Times,TimesNR,'New Century Schoolbook',Georgia,'New York',serif;} 有空格、包括“#”和”$”的时候加“单引号”Cursive必须加“双引号”2.字体加粗a)Font-weight:bold bolder mormal 100 --900 lighterb)相对⼤⼩关键字:Bolder 是相对于⽗级字体粗细⽽⾔3.字体⼤⼩a)Font-size:xx-small x-small small medium large x-large xx-large smaller larger inheritb)相对⼤⼩关键字：larger smallerc)绝对⼤⼩：xx-small x-small small medium large x-large xx-larged)百分数：根据⽗元素继承的⼤⼩来计算strong {font-weight: lighter; font-size:larger;}strong b {font-weight:lighter; font-size:200%;}4.风格和变形a)字体风格：Font-style:italic oblique normal inheritb)字体变形：font-variant:small-caps normal inherit（只对英⽂有⽤，对汉语没有影响）c)转换⼤⼩写：p{ text-transform:uppercase;}5.拉伸和调整字体a)字体拉伸：font-stretch:normal| wider | narrower | ultra-condensed | exTRa-condensed| condensed| semi-condensed| semi-expanded| expanded| exTRa-expanded| ultra-expanded | inheritb)我的浏览器不⽀持（可以忽略）6.Font属性a)等价：h1{ font-style:inherit; font-weight:bold; font-variant:small-caps; font-size：20px; font-family:Candara,Corbel;}h1{ font:inherit bold small-caps20px Candara,Corbel; }b)注意;前两个可以互换，后两个不可以，normal 可以省略c)增加⾏⾼：line-height,Eg：body {font-size: 12px;}h1 {font: bold italic200%/1.2Verdana,Helvetica,Arial,sans-serif;}7.字体匹配六．⽂本属性1.缩进和⽔平对齐a)缩进⽂本：(只能⽤于块级元素！)text-indent:3em 10%b)⽔平对齐：(只能⽤于块级元素！)text-align:left center right justify(两端对齐⽂本) inherit2.垂直对齐：元素中⽂本基线之间的最⼩距离a)Line-height:”line-height”减去“font-size”等于⾏间距i.Line-height:18px,0.33in,150%,1.5emii.适⽤于所有元素iii.⾏⾼和继承：Line-height值从⽗元素继承时，要从⽗元素计算，⽽不是⼦元素上计算。