css初步认识

css初步认识

• CSS 指层叠样式表 (Cascading Style Sheets)，控制html元素的显示，美化html页面；多个样式定义可层叠为一，后者可以覆盖前者样式。
• 语法格式：选择器{属性:值;属性:值;属性:值;…}
• css中注释： /* … */

如何使用？

1. 内联方式（行内样式）

• 就是在HTML的标签中使用style属性来设置css样式
• 格式： 被修饰的内容

  
这是红色的字
  

2. 内部方式（内嵌样式）

就是在head标签中使用style标签来设置css样式

3. 外部导入方式（外部链入）

在head标签中使用标签导入一个css文件，在作用于本页面，实现css样式设置

css常用选择符

css2的选择符

1. html选择符（标签选择器）
   就是把html标签作为选择符使用
如 p{....} 网页中所有p标签采用此样式
2. class类选择符 (使用点.将自定义名（类名）来定义的选择符)
   定义： .类名{样式…} 匿名类
   其他选择符名.类名{样式…}
   使用：…
   .mc{color:blue;} /* 凡是class属性值为mc的都采用此样式 */
   p.ps{color:green;} /只有p标签中class属性值为ps的才采用此样式/
   注意：类选择符可以在网页中重复使用
3. Id选择符
   定义： #id名{样式…}
   使用：…
   注意：id选择符只在网页中使用一次.
4. 关联选择符（包含选择符）
   格式： 选择符1 选择符2 选择符3 …{样式…}

table a{....} /*table标签里的a标签才采用此样式*/
h1 p{color:red} /*只有h1标签中的p标签才采用此样式*/

5. 组合选择符（选择符组）

h3,h4,h5{color:green;} /*h3、h4和h5都采用此样式*/

6. 伪类(伪元素)选择符

a:link {color: #FF0000; text-decoration: none}             /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none}          /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline}     /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline}     /* 激活链接 */

CSS3中的选择器

待补充

CSS常用属性

1. 颜色属性：color

• HSL颜色: 通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色.
  background-color: hsl(240,100%,50%);color:white；
• HSLA颜色: 色调(H)、饱和度(S)、亮度(L)、透明度(A)；
  background-color: hsla(0,100%,50%,0.2);
• RGB颜色: 红®、绿(G)、蓝(B)三个颜色通道的变化
  background-color: rgba(200,100,0);
• RGBA颜色: 红®、绿(G)、蓝(B)、透明度(A)
  background-color: rgba(0,0,0,0.5);
• 图片透明度的设置 img.opacity{ opacity:0.25;}
  兼容IE8 filter:alpha(opacity=100);

2.字体属性：font

• font-size: 字体大小：20px，60%基于父对象的百分比取值
• *font-family： 字体：宋体，Arial
• font-style： normal正常；italic斜体； oblique倾斜的字体
• *font-weight： 字体加粗 ：bold
• font-variant: small-caps 小型的大写字母字体
• font-stretch: [了解]文字的拉伸是相对于浏览器显示的字体的正常宽度（大部分浏览器不支持）。

3.文本属性

• text-indent: 首行缩进：text-indent:30px;

• text-overflow： 文本的溢出是否使用省略标记（…）。clip|ellipsis（显示省略标记）

• *text-align: 文本的位置：left center right

• text-transform：对象中的文本的大小写：capitalize(首字母)|uppercase大写|lowercase小写

• *text-decoration: 字体画线：none无、underline下画线，line-through贯穿线

• text-decoration-line：[了解]文本装饰线条的位置（浏览器不兼容）

• *text-shadow: 文本的文字是否有阴影及模糊效果

• vertical-align: 文本的垂直对齐方式

• direction：文字流方向。ltr | rtl

• white-space:nowrap; /* 强制在同一行内显示所有文本*/

• *letter-spacing: 文字或字母的间距

• word-spacing：单词间距

• *line-height：行高

• *color： 字体颜色

4.背景属性：background

• *background-color: 背景颜色
• *background-image: 背景图片
• *background-repeat：是否重复，如何重复?(平铺)
• *background-position：定位
• background-attachment： 是否固定背景，
  scroll:默认值。背景图像是随对象内容滚动
  fixed:背景图像固定
  css3的属性:
• *background-size: 背景大小，如 background-size:100px 140px;
  多层背景：
  background:url(test1.jpg) no-repeat scroll 10px 20px,url(test2.jpg) no-repeat scroll 50px 60px,url(test3.jpg) no-repeat scroll 90px 100px;
  background-origin:content-box,content-box,content-box;
  background-clip:padding-box,padding-box,padding-box;
  background-size:50px 60px,50px 60px,50px 60px;

5.边框

border:宽度 样式 颜色;
border-color;
border-style; 边框样式：solid实现，dotted点状线，dashed虚线
border-width:
border-left-color;
border-left-style;
border-left-width:
…
CSS3的样式
border-radius：圆角处理
box-shadow: 设置或检索对象阴影

6.内补白 margin

padding： 检索或设置对象四边的内部边距,如padding:10px; padding:5px 10px;
padding-top： 检索或设置对象顶边的内部边距
padding-right： 检索或设置对象右边的内部边距
padding-bottom：检索或设置对象下边的内部边距
padding-left： 检索或设置对象左边的内部边距

7.外补白 padding

margin： 检索或设置对象四边的外延边距,如 margin:10px; margin:5px auto;
margin-top： 检索或设置对象顶边的外延边距
margin-right： 检索或设置对象右边的外延边距
margin-bottom： 检索或设置对象下边的外延边距
margin-left： 检索或设置对象左边的外延边距

8.定位 Positioning

• *position: 定位方式：absolute(绝对定位)、fixed(固定)（relative定位参考，可对内部相对absolute定位）
• *z-index: 层叠顺序，值越大越在上方。
• *top: 检索或设置对象与其最近一个定位的父对象顶部相关的位置
• right: 检索或设置对象与其最近一个定位的父对象右边相关的位置
• bottom: 检索或设置对象与其最近一个定位的父对象下边相关的位置
• *left: 检索或设置对象与其最近一个定位的父对象左边相关的位置

9.布局 Layout

• *display： 是否及如何显示：none隐藏，block块状显示…
• *float: 指出了对象是否及如何浮动:值none | left | right
• *clear： 清除浮动：none | left | right | both两侧
• visibility：设置或检索是否显示对象。visible|hidden|collapse。
  与display属性不同，此属性为隐藏的对象保留其占据的物理空间
• clip: 检索或设置对象的可视区域。区域外的部分是透明的。 rect(上-右-下-左)
  如：clip:rect(auto 50px 20px auto);上和左不裁剪，右50，下20.
• *overflow: 超出隐藏：hidden，visible：不剪切内容
• overflow-x：内容超过其指定宽度时如何管理内容: visible | hidden | scroll | auto
• overflow-y：内容超过其指定高度时如何管理内容
  弹性盒模型 Flexible Box Layout