CSS部分

发表于: | 分类于: | 本文总阅读量 次
| 字数统计: 2.6k字 | 阅读时长 ≈ 11分钟

1.HTML<!DOCTYPE>声明标签

<!doctype>声明必须是HTML文档是的第一行，位于标签之前。
<!doctype>声明不是HTML标签；它是指示web浏览器关于页面使用的哪个HTML版本进行编写的指令。

HTML5为<!doctype html>,<meta charset="utf-8">

在html4.01中单标记必须闭合，单属性必须必须添加属性值，标记和属性必须使用小写，属性的属性值必须使用””。

2.使用CSS样式的方式

a.内链样式表：

1
2
<!--内链样式表-->
	<body style="background-color:green; margin:0; padding:0;" >

b.嵌入式样式表：

需要放在<head></head>中

1
2
3
4
5
6
<!--嵌入式样式表-->
	<style type="text/css">
		p{
			background-color:yellow;
			color:black;
		}

p是<p></p>标记，如果是<h1></h1>标记就为：

1
2
3
4
5
6
<!--嵌入式样式表-->
	<style type="text/css">
		h1{
			background-color:yellow;
			color:black;
		}

c.引入式样式表：

1
2
<!--引入式样式表-->
	<link rel="stylesheet" type="text/css" herf="style.css">

style.css为新建的css文件，表示要设置属性内容：

1
2
3
4
body{
		background-color:green;
		color:yellow;
	}

3.定义样式表

<h1><h1>,h1{属性:属性值; 属性:属性值:},h1为选择器，定义那个标记中的内容执行其中的样式，一个选择器可以控制若干个样式属性，属性之间用英语“;”隔开。

a.Class定义：

<p class="p"></p>,class定义是以“.”开始

p{属性1:属性值; 属性2:属性值;}

1
2
3
4
5
		.p{color:green;font-size:10px}
	</style>
</head>
<body>
	<p class="p">小土豆很强</p>

b.id定义：

<p id="pp"></p>,id定义是#开始的。#pp{属性1:属性值1; 属性2:属性值2;},id只能出现一次。

1
2
3
4
5
#PP{background-color:green; color:blue; font-size:20px;}
</style>
</head>
<body>
<p id="pp">...</p>

优先级为id>class>html，如

1
2
3
p{......}
.p{......}
#pp{......}

不管顺序如何，结果都为#pp{……}中的内容设置。

同级时选择离元属最近一个的，如

1
2
#pp{color:red}
#pp{color:white}

则执行颜色为白色的。

组合选择器（同时控制多个元素）

h1,h2,h3{font-size:20px; color:red;},选择器组合可以使用“.”隔开

超链接：

1
2
3
4
a:link{color:red};        正常连接的样式
a:hover{color:yellow};    鼠标放上去的样式
a:active{color:blue};     选择链接时的样式
a:visited{color:yellow};  已经访问过的链接的样式

上面的内容纯属不要年放上去的啊！装了一波，哈哈哈！

4.CSS常见属性

  1. 颜色属性：

color属性定义文本的颜色，可以有以下格式：

a. color:green

b. color:#ff6600或color:f60 ff(red)66(green)00(blue)

c. RGB——- color:rgb(0~255,0~255,0~255)

d. RGBA——color:rgba(0~255,0~255,0~255,1) #其中A代表Alpha的（色彩空间）透明

  1. 字体属性
    1. font-size字体大小，格式为：font-size:内容;内容有px:设置一个固定的值。%:父元素的百分比。smaller:比父元素更小。larger:比父元素更大。inherit:继承父元素的。
    2. font-family字体类型，格式为：font-family:微软雅黑, serif;可以用","隔开，以确保当字体不存在的时候直接使用下一个。
    3. font-weight字体加粗，格式为：font-weight:内容，内容有normal（默认值）、bold（粗）、bolder（更粗）、lighter（更细），也可以用100~900之间的整百数来表示，其中400=normal，700=bold。
    4. font-style字体样式，font-style:内容，内容有normal（正常）、italic（斜体）、oblique（倾斜）、inherit（继承）。
    5. font-variant小型大写字母显示文本，格式为：font-variant:内容，内容有normal（标准）、small-caps（小型大写字母显示文本）、inherit（继承）。

  1. 背景属性

    1. 背景颜色：background-color

    2. 背景图片：background-image

      background-image:url(图片路径)

      background-image:none

    3. 背景重复：background-repeat

      background-repeat:repeat 重复平铺满

      background-repeat:repeat-x 向x轴重复

      background-repeat:repeat-y 向y轴重复

      background-repeat:no-repeat 不重复

    4. 背景位置：background-position:(x)(y)

      横向（left,center,right）

      纵向（top,center,bottom）

      也可以为像素px。简写方式background:背景颜色 url(图像) 重复 位置

      background:#f60 url(图片路径) no-repeat top center

  2. 文本属性

    1. 横向排列text-align:left,left、center、right

    2. 文本行高line-height:,%基于字体大小的百分比行高，数值来设置固定的值。

    3. 首行缩进text-indent:,%父元素的百分比，px固定值，默认为0，inherit继承。

    4. 字符间距letter-spacing:,normal默认，length设置具体的数值（可以设置为负值），inherit继承。

    5. 单词间距word-spacing:,normal标准间距，px固定值，inherit继承。

    6. 文本方向direction:,ltr从左到右，rtl从右到左，inherit继承。

    7. 文本大小写text-transform:,none默认，capitalize每个单词以大写字母开头，uppercase定义仅有大写字母，lowercase定义无大写字母，仅有小写字母，inherit规定应该从父元素继承text-transform属性的值。

  3. 边框属性

    1. 边框风格border-style:,统一风格border-style:，none无边框，solid直线边框，dashed虚线边框，dotted点状边框，double双线边框，groove凸槽边框，ridge垄状边框，inset inset边框，outset outset边框，inherit继承。单独定义某一方向的边框样式:
    1
    2
    3
    4
    border-bottom-style 下边边框样式
    border-top-style 上边框样式
    border-left-style 左边边框样式
    border-right-style 右边边框样式

    1. 边框宽度border-width:,统一风格border-width:,单独风格border-top-width上边边框宽度,border-bottom-width下边边框宽度,border-left-width左边边框宽度,border-right-width右边边框宽度。边框宽度属性值：thin 细边框、medium 中等边框、thick 粗边框、px 固定值边框、inherit 继承。

    2. 边框颜色border-color:,统一风格border-color:,单独风格border-top-color 上边框颜色，border-bottom-color 下边框颜色，border-left-color 左边框颜色，border-right-color 右边框颜色。边框颜色属性值：rgb(255,255,255)、rgba(255,255,255,0~1)、十六进制 #ff0000、继承inherit。属性值的四种情况：一个值：border-color:（上、下、左、右）；两个值：border-color:（上下）（左右）；三个值：border-color:（上）、（左、右）、（下）；四个值：border-color:（上）（下）（左）（右）；简写方式：border:solid 2px #f60。

  4. 列表属性

    1. 标记类型list-style-type:；

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      none 无标记
      disc 默认，标记是实心圆
      circle 标记是空心圆
      square 标记是实心方快
      decimal 标记是数字
      decimal-leading-zero 0开头的数字标记（01，02，03等）
      lower-roman 小写罗马数字（i，ii，iii，iv，v等）
      upper-roman 大写罗马数字（I，II，III，IV，V等）
      lower-alpha 小写英文字母（a，b，c等）
      upper-alpha 大写英文字幕（A，B，C等）
      lower-greek 小写希纳字母（alpha，beta，gamma等）
      lower-latin 小写拉丁字母（a，b，c，d，e等）
      upper-latin 大写拉丁字母（A,B,C，D，E等）
      hebrew 传统的希伯来编号方式
      armenian 传统的亚美尼亚编号方式
      georgian 传统的乔治亚编号方式（an，ban，gan等）
      cjk-ideographic 简单的表意数字
      hiragana 标记是：a，i，u，e，o，ka，ki等。
      katakana 标记是：A，I，U，E，O，KA，KI等。
      hiragana-iroha 标记是：i，ro，ha，ni，ho，he，to等。
      katakana-iroha 标记是：I，RO，HA，NI，HO，HE，TO等。

    2. 标记的位置list-style-position:,inside列表项目标记放置在文本内，且环绕文本根据标记对齐。outside是默认值，保持标记位于文本的左侧。列表项目标记放置在文本以外，且环境文本不根据标记对齐。inherit规定应该从父元素继承list-style-position属性的值。

    3. 设置图像列表标记list-style-image:,url(图像路径)，none默认，无图形被显示。inherit规定应该从父元素继承list-style-image属性的值。

      简写方式：list-style:square inside url('/i/arrow.jpg');

5.div+css布局

  1. div和span，div和span在整个HTML标记中，没有任何意义，他们的存在就是为了应用CSS样式，div和span的区别在于，span是内联元素，div是块级元素。div是块状，而span只是内容大小。

  2. 盒模型：

    1
    2
    3
    4
    5
    margin 盒子外边框
    padding 盒子内边框
    border 盒子边框宽度
    width 盒子宽度
    height 盒子高度

  1. 布局相关的属性

    1. 定位方式position

      1
      2
      3
      4
      5
      relative 正常定位
      absolute 根据父元素进行定位
      fixed 根据浏览窗口进行定位
      static 没有定位
      inherit 继承2.

  1. 定位left（左）、right（右）、top（上）、bottom（下）离页面顶点的距离。如：right:20px;为距离右边边框20像素。

  2. z-index层覆盖先后顺序（优先级）如：z-index:2。

  3. display显示属性，层不显示display:none;块状显示，在元素后面换行，显示下一个块元素display:block;内联显示，多个快可以显示在一行内display:inline;从内联式到块样式之间的转换。

  1. float浮动属性，left左浮动；right右浮动；

  2. clear 清除浮动，clear:both;

  3. overflow溢出处理，hidde影藏超出层大小的内容；scroll无法显示内容是否超出层大小都添加滚动条；auto超出时自动添加滚动条。

  1. 兼容问题

    1. 兼容性测试工具：IE Tester、Multibrowser
    2. 常用的浏览器：Google chrome、Firefox、opera
    3. 高效开发工具：轻量级工具：Notepad++、sbulime Text、记事本，重量级的：WebStorm、Dreamweaver。
    4. 网页设计工具：fireworks、photoshop。
    5. 判断IE的方法：

    条件判断格式<!--[if 条件 版本]> 那么显示 <![endif]-->。

    • 不等于[if !IE 8]表示出来IE8都可以显示
    • 小于[if lt IE 8]表示如果IE浏览器版本小于8的显示
    • 大于[if gt IE 8]表示如果IE浏览器版本大于8的显示
    • 小于或等于[if lte IE 8]表示如果IE浏览器版本小于8的显示
    • 大于或等于[if gte IE 8]表示如果IE浏览器版本大于8的显示
    • 大于和小于之间[if (gt IE 5)&(lt IE 7)]表示如果IE浏览器版本大于IE5小于7的显示
    • 或[if (IE 6)|(IE 7)]表示如果是IE6或者IE7显示
    • 仅<!–[if IE 8]>表示如果是IE8

注意：条件注释只有在IE浏览器下才能执行，这样就达到了我们的效果

0%