CSS基础

2018-11-21 本文已影响0人心有心距离

CSS :层叠样式表（Cascading Style Sheets）。

CSS 书写位置及优先级(优先级按顺序排列，由上至下)

内联样式（在 HTML 元素内部）
内部样式表（位于 <head> 标签内部）
外部样式表（使用 <link> 标签外部引入位于head标签内部）

CSS 语法

由两个主要的部分构成：选择器，以及一条或多条声明。
```
  selector {color:red; declaration2; ... declarationN }
```

选择器通常是您需要改变样式的 HTML 元素。(例如上例:selector )
每条声明由一个属性和一个值组成。(例如上例:color:red;)

css语法详解图

选择器

   <body><h1 id="red" class="red" title="h1">我是h1</h1>  <h2 title="h2">我是h2</h2></body>

分组选择器关键符号:逗号(,) 例如: h1,h2,h3,h4,h5,h6 { }
派生选择器关键符号:空格例如: body h1{ }
id选择器关键符号:#号(#) 例如: #red{ }
类选择器关键符号:点(.) 例如: .red{ }
属性选择器关键符号:中括号([]) 例如: [title]{ }/[title=h1]{}/[title=h2]{}
子元素选择器关键符号:扩折号(>) 例如: body > h1
相邻兄弟选择器关键符号:加号(+) 例如: h1 + h2
伪类选择器
后代选择器（descendant selector）又称为包含选择器

声明(CSS 样式)

尺寸

width: auto|length|%|inherit;//设置宽度
min-width:  none|length|%|inherit;//设置最小宽度
max-width: none|length|%|inherit;//设置最大宽度
height: auto|length|%|inherit;//设置高度
min-height: none|length|%|inherit;//设置最小高度
max-height: none|length|%|inherit;//设置最大高度
line-height: normal|number|length|%|inherit;//设置行间的距离(行高)

背景

background: #00FF00 url(bgimage.gif) no-repeat fixed top;
background-color:'red';//背景颜色
background-image:'url(图片路径)';//背景图片
background-repeat:'repeat'|'repeat-x'|'repeat-y'|'no-repeat'|'inherit';//如何重复背景图像 
background-position:'top'|' left'|'center';//背景图像的起始位置
background-attachment :'scroll'|'fixed'|'inherit';//背景图像是否固定或者随着页面的其余部分滚动
background-size:length|percentage|cover|contain;//背景图像的尺寸
background-clip:border-box|padding-box|content-box;//背景的绘制区域

文本

color: 'red'|'green'|...;//设置文本颜色
direction: 'ltr'|'rtl'|'inherit';//文本的方向 / 书写方向
line-height: normal|number|length|%|inherit;//设置行高
letter-spacing: normal|length|inherit;//设置字符间距
text-align: center|left|right ;//对齐元素中的文本
text-decoration: none|underline|overline|line-through|blink|inherit;//向文本添加修饰横线
text-indent: length|%|inherit;//缩进元素中文本的首行
text-transform: none|capitalize|uppercase|lowercase|inherit;//控制元素中的字母
text-shadow: ;//设置文本阴影
unicode-bidi:  ;//设置文本方向
word-spacing: normal|length|inherit;//设置字间距
text-shadow: h-shadow v-shadow blur color;//设置文本阴影
word-wrap: normal|break-word;//设置长单词换行

字体

font: italic bold 12px/20px arial,sans-serif;
font-size:  medium|smaller|larger|%|inherit;//设置字体的尺寸
font-family: italic bold 12px/20px arial,sans-serif;//设置字体
font-style: normal|italic|oblique|inherit;//字体样式
font-variant: normal|small-caps|inherit;//以小型大写字体或者正常字体显示文本
font-weight: normal|bold|bolder|lighter|100-900|inherit;//设置字体的粗细

链接

a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

列表

list-style:square inside url('/i/arrow.gif');
list-style-image: ;//将图象设置为列表项标志
list-style-position: ;//规定列表中列表项目标记的位置
list-style-type: none|disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin |lower-alpha| upper-alpha| hebrew|armenian | georgian | cjk-ideographic| hiragana|katakana|hiragana-iroha|katakana-iroha;//设置列表项标志的类型

表格

border-collapse: separate|collapse|inherit;//为表格设置合并边框
border-spacing: length length|inherit;//设置分隔单元格边框的距离
caption-side: top|bottom|inherit;//设置表格标题的位置
empty-cells: hide|show|inherit;//设置是否显示表格中的空单元格
border-layout: automatic|fixed|inherit;//设置表格布局

轮廓

outline:#00FF00 dotted thick;
border-layout: automatic|fixed|inherit;//设置轮廓的颜色
outline-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit;//设置轮廓的样式
outline-width: thin|medium|thick|length|inherit;//设置轮廓的宽度

内边距

padding:2cm 4cm 3cm 4cm;
padding-top: length|%|inherit;//设置元素的上内边距
padding-right:  length|%|inherit;//设置元素的左内边距
padding-bottom:  length|%|inherit;//设置元素的下内边距
padding-left:  length|%|inherit;//设置元素的右内边距

边框

border:5px solid red;
border-style: none|hidden|dotted|dashed|solid|groove|ridge|inset|outset|inherit;//设置边框的样式
border-width: thin|medium|thick|length|inherit;//设置边框的宽度
border-color: color_name|hex_number|rgb_number|transparent|inherit;//设置边框的颜色
border-radius: length|%;//圆角边框
border-image: "url(border.png) 30 30 round";
border-image-source//用在边框的图片的路径
border-image-slice//图片边框向内偏移
border-image-width//图片边框的宽度
border-image-outset//边框图像区域超出边框的量
border-image-repeat:repeated|rounded|stretched;//图像边框是否 平铺|铺满|拉伸
box-shadow: h-shadow v-shadow blur spread color inset;//边框阴影

外边距

margin : 10px 0px 15px 5px;
margin -top:  auto|length|%|inherit;//设置元素的上外边距
margin -right:  auto|length|%|inherit;//设置元素的左外边距
margin -bottom:  auto|length|%|inherit;//设置元素的下外边距
margin -left:  auto|length|%|inherit;//设置元素的右外边距

定位

一切皆为框
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

position: static|relative|absolute|fixed;//定位

浮动

float: none|left|right|initial;//浮动
clear: left|right|both|none|inherit;//清除浮动

媒介类型

@media:使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介

 @media  all|aural|brailleembossed|handheld|print|projection|screen|tty|tv {}

媒介类型名称对大小写不敏感

转换

transform: none|transform-functions;元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
none  //定义不进行转换
matrix(n,n,n,n,n,n)   //定义 2D 转换，使用六个值的矩阵
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) //定义 3D 转换，使用 16 个值的 4x4 矩阵。    
translate(x,y)    //定义 2D 转换
translate3d(x,y,z)    //定义 3D 转换  
translateX(x) //定义转换，只是用 X 轴的值
translateY(y) //定义转换，只是用 Y 轴的值
translateZ(z) //定义 3D 转换，只是用 Z 轴的值。   
scale(x,y)    //定义 2D 缩放转换
scale3d(x,y,z)    //定义 3D 缩放转换。   
scaleX(x) //通过设置 X 轴的值来定义缩放转换
scaleY(y) //通过设置 Y 轴的值来定义缩放转换
scaleZ(z) //通过设置 Z 轴的值来定义 3D 缩放转换。    
rotate(angle) //定义 2D 旋转，在参数中规定角度
rotate3d(x,y,z,angle) //定义 3D 旋转。 
rotateX(angle)    //定义沿着 X 轴的 3D 旋转
rotateY(angle)    //定义沿着 Y 轴的 3D 旋转
rotateZ(angle)    //定义沿着 Z 轴的 3D 旋转
skew(x-angle,y-angle) //定义沿着 X 和 Y 轴的 2D 倾斜转换
skewX(angle)  //定义沿着 X 轴的 2D 倾斜转换
skewY(angle)  //定义沿着 Y 轴的 2D 倾斜转换
perspective(n) //为 3D 转换元素定义透视视图

过渡

transition: property duration timing-function delay;
transition-property:none|all|property;//规定设置过渡效果的 CSS 属性的名称。
transition-duration: time;//规定完成过渡效果需要多少秒或毫秒。
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);//规定速度效果的速度曲线。
transition-delay: time;//定义过渡效果何时开始。

动画

@keyframes animationname {keyframes-selector {css-styles;}}//动画的名称 动画时长的百分比 CSS 样式属性
animation: name duration timing-function delay iteration-count direction;//所有动画属性的简写属性
animation-name: keyframename|none;    //规定需要绑定到选择器的 keyframe 名称。。
animation-duration: time; //规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function :使用三次贝塞尔规定动画的速度曲线。
animation-delay: time;//规定在动画开始之前的延迟。
animation-iteration-count:n|infinite;//规定动画应该播放的次数。
animation-direction: normal|alternate;//定是否应该轮流反向播放动画。
animation-play-state: paused|running;//规定动画正在运行还是暂停
animation-fill-mode : none | forwards | backwards | both;//规定动画在播放之前或之后，其动画效果是否可见

*界面

resize: none|both|horizontal|vertical;//规定是否可由用户对元素的尺寸进行调整。

box-sizing: content-box|border-box|inherit;//允许您以确切的方式定义适应某个区域的具体内容
outline-offset: length|inherit;//对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

@参考资料 w3school.com

CSS基础

CSS :层叠样式表（Cascading Style Sheets）。

猜你喜欢

热点阅读