CSS语法格式

Posted by Suzeyu on 2016-04-03

自学小笔记

CSS语法格式

h1 {color:red; font-size:14px}
选择器          声明属性    值

一个css由选择器格式声明语句构成。

选择器:就是选择HTML标记,换句话说:就是给哪个HTML标记加样式。

格式声明语句: 由{}构成。内部由 属性名:属性值 构成,并以分号结束。

属性名就是CSS中的各种属性,这些属性都是固定的。

属性值可以区分不同的值,不需要引号。

CSS中的数字单位都是pxpx不能省略。

CSS选择器

1.基本选择器

*选择器 又叫通配符

  • 描述:将匹配所有的HTML标签。所有的标记都会改变。
  • 语法:*{color:red} 将所有的HTML标记的颜色都会变为红色。

    标签选择器

  • 描述:将匹配指定的HTML标签。

  • 语法:h1{color:red} 将指定的标记改变其状态。

class选择器

  • 描述:给一类HTML标签加样式,这里所指的每个HTML标记都应该有一个class属性。class属性是公共的属性。
  • 语法:.className{color:red} 类选择器必须以.开头,后面跟HTMLclass的属性。(类选择器如果有多个相同可以用class所在的标签名称加前缀来区分)。

id选择器

  • 描述: 给指定id的元素添加样式。(注意:网页中HTML标记的id属性值,必须是唯一的)。每一个HTML标记都有一个公共属性id
  • 语法: #classId{color:red;}id属性一般是给js使用的,尽量不要加css的样式。而class属性只能给css用,不能给js用。id选择器必须#开头。

2.组合选择器

多元选择器

  • 描述: 给多个元素加同一个样式,每个选择器之间用逗号‘,’分开。
  • 举例: h1,p,div,body{color:red;}

后代选择器

  • 描述: 给某一个标签的后代元素加样式。选择器之间用空格分开。
  • 举例: div h1.title{background-color:yellow;}

子元素选择器

  • 描述: 给某个元素的子元素加样式
  • 举例: .box > .title{color:red;}

CSS优先级

1 单个选择器的优先级:

行内样式 > id选择器 > class选择器 > 标签选择器

2 多个选择器的优先级

多个选择器的优先级,指向越明确,优先级越高。特殊情况下,我们需要假设一些值:

标签选择器 优先级为1

类选择器 优先级为10

id选择器 优先级为100

行内选择 优先级为1000

3.css注释

css注释内容:/* css 注释内容 */
html注释: <!-- 注释内容 -->

4.css尺寸属性

  • width:元素宽度,一定要加px单位。
  • height:元素高度

注意: span行内元素没有储存属性。div只有块元素才有尺寸属性。而input比较特殊是行内元素,但也可以指定宽高。

5.css字体属性

  • font-size: 文字大小,如: font-size:14px
  • font-family: 字体。如: font-family:温软雅黑
  • font-style:斜体,取值italic。 如: font-style:italic
  • font-weight: 粗体,取值bold。 如: font-weight:bold;

6.css文本颜色

  • color: 文本颜色。
  • text-decoration: 文本修饰线,取值:none(无),underline(下划线),overline(上划线),line-through(删除线).
  • line-height: 行高,可以用固定值,也可以用百分比。如:line-height:20px ; line-height:150%;* text-indent: 首行缩进,如 text-indent:28px;
  • letter-spacing: 字间距。

display 属性

功能:规则网页元素如何显示的问题。

取值:

  • none(隐藏)、
  • block(已块元素显示)、
  • inline(以行内元素显示)
  • block: 可以实现将行内元素转成块元素。
  • inline: 可以实现将块元素转成行内元素。

overflow

功能: 当内容溢出的时候,该如何显示。

overflow: 当内容溢出时,溢出的内容该如何显示。

取值:

  • visity(显示),
  • auto(多余部分可通过滚动条查看),
  • hidden(截取掉多余的部分)

cursor光标类型

功能:网页中光标的类型

取值: helpwaitpointer(手形光标)等。

常用标签属性

css伪类选择器 超链接加样式

一个超链接有四个状态:

  1. 正常状态(:link): 鼠标放上之前连接的样式。
  2. 放上状态(:hover): 鼠标放到链接上时的样式。
  3. 激活状态(:active): 按住鼠标左键不松开的样式,这个状态特殊短暂。
  4. 访问过的状态(:visited): 按下鼠标左键,并弹起之后。

在开发中,会使用一下写法,来给链接加上不同的效果:

a:link,a:visited,{color:#666;text-decoration:none} //默认和已访问时
a:hover{color:#999;text-decoration:underline;}

css列表属性

  • list-style: 列表样式,取值:none去掉项目符号或编号前面的各种符号 。ul ,li

css 表格属性

  • border-collapse: 表格边框线合并,取值: collapse.

css边框属性:每个元素都可以加边框线

格式: border-left: 粗细 线性 线的颜色

border-left: 1px solid red

线性: none(无线),solid(实线),dashed(虚线),dotte(点状线)

  • border-left: 左边框线
  • border-right: 右边框线
  • border-bottom: 下边框线
  • border-top: 上边框线
  • border: 同时给四个边加边框。

CSS 外边距: 边框线往外的距离

  • margin-left: 左边线往外的距离。
  • margin-right: 右边线往外的距离。
  • margin-top: 上边线往外的距离。
  • margin-bottom: 下边线往外的距离。

简写式:

margin: 10px //四个外边距分别为10px
margin: 10px 20px    //上下外边距为10px。左右外边距为20px
margin: 5px 10px 15px;    //上外边距5px,左右外边距10px,下外边距15px。
margin: 5px 10px 15px 20px //顺序一定是"上右下左"

css 背景属性

  • background-color: 背景颜色。
  • background-image: 背景图片地址。如:background-image:url(images/bg.gif)
  • background-repeat: 背景平铺方式,取值: no-repeat(不平铺) repeat-x(水平方向) repeat-y(垂直方向)
  • background-position: 背景定位

中文: background-position: 水平方向定位 垂直方向定位

英文: background-position: left|center|right top|center|bottom

固定值: background-position: 50px 50px

百分比: background-position: 50% 50% //水平居中,垂直居中

混合定位: background-position: left 10px; //背景靠左边齐,距离容器顶端10px
简写方式

background: 背景色 背景图 平铺方式 定位方式;

CSS浮动和清除

  • float: 让元素浮动,取值: left(左浮动)、 right(右浮动)
  • clear: 清除浮动, 取值: left(清除左浮动)、 right(清除右浮动)、
  • both(同时清除上面的左右浮动)

1 css浮动

浮动的元素,将向左或向右浮动,浮动到包围元素的边上,或上一个浮动元素的边上为止。

浮动的元素,不在占空间了,并且,浮动元素的层级要高于普通元素。

浮动的元素,一定是块元素。不管他原来是什么元素。

如果浮动的元素没有指定宽高的话,浮动后它将尽可能的变窄。因此,浮动元素一般要定宽和高。

一行中的多个元素要浮动一起浮动!

浮动的功能:可以实现将多个块元素并且列版。

?如何让包围元素,包住包围元素?
在浮动元素的下边,使用清除浮动操作。
clear:both;

2 CSS清除浮动

css清除浮动的功能有两个

  1. 可以包围元素从视觉上包住浮动元素
  2. 清除之下的其他元素将恢复默认排版。

有浮动就必须要与清除。

如果包围元素指定了高度了。那么可以不适用清除功能。

CSS属性继承:外层元素的样式,会被内层元素进行继承。多个外层元素的样式,最终会”叠加”到内层元素上。

什么样的css属性能被继承??

css文本属性都会被继承:

color、font-size、font-family.font-style、font-weight、text-align、text-decoration、text-indent、letter-spacing、line-height

提示<body>中的css属性。会被所有元素继承。

CSS 定位

默认为文档流—从上而下。

定位方式:position
取值:staticfixedrelativeabsolute

  • static:静态定位(默认状态,不定位)
  • Fixed:固定定位
  • relative:相对定位
  • absolute:绝对定位

定位方式,要与定位属性配合使用

定位坐标: 指定定位的元素,偏移目标元素多远的距离。

  • Left: 定位元素,距离目标元素左边的距离
  • Top: 定位元素,距离目标元素上边的距离
  • Right: 定位元素,距离目标元素右边的距离
  • Bottom: 定位元素,距离目标元素下边的距离

1 固定定位 position:fixed

  • 固定定位,是相对于浏览器窗口来进行的定位。
  • 固定定位,不占空间,层级要高于普通元素。他不会随着网页的滚动而滚动。
  • 如果不指定定位坐标的话,固定元素的位置在原地不动。
  • 固定定位元素,一定是”块元素”

2 相对定位 position:relative

  • 相对定位, 是相对于”原来的自己”进行定位
  • 相对定位, 依然占空间,层级高于普通元素。
  • 如果不指定定位坐标的话,相对定位元素的位置在原地不动。
  • 相对定位原来是块元素还是块元素,如果原来是行内元素还是行内元素。

提示 相对定位和绝对定位,一般情况下是配合使用的。

3 绝对定位 position:absolute

  • 相对于祖先定位元素(相对定位,决定定位),来进行的定位
  • 如果他的父元素没有进行任何定位的话,再往上找定位元素
  • 如果一直找到<body>都没有找到定位元素的话,那就相对于<body>来进行定位。网页定位
  • 绝对定位元素,不占空间,层级要高于普通元素。
  • 如果不指定定位坐标的话,绝对定位元素的位置在原地不动。
  • 绝对定位,转换为块元素

定位可以设置层叠之间顺序

z-index: //值越大越靠近前排

HTML引入CSS的方法

1 嵌入式

  • 通过<style>标记,来引入css样式。
  • 语法格式: <style type="text/css"></style>
  • 提示: <style>中CSS样式,只能给当前网页来使用。同一个网页中,<style>标记可以出现出现。

2 外联式

  • 通多<link>标记,来如因一个外部的CSS文件(.css),这样的话,可以实现公共的CSS代码被多个页面共享。
  • <link rel="stylesheet" type="text/css" href="css/public.css"/>
  • <link>标记的常用属性
  • rel: 也就是引入的是什么类型的文件。取值:stylesheet
  • type: 内容类型。
  • href: 引入的CSS文件地址。
  • 提示:<link>标记放在<head>标记中。
  • 同一个网页,可以使用多个<link>来链入多个外部样式文件。

3 行内式(主要用于JS控制元素的样式)

  • 每一个HTML标记,都有一些公共的属性: classidtitlestyle
  • HTML标记中style属性的值,与CSS中样式一模一样。

盒子模型

我们可以把每一个HTML标记,都看成一个盒子

盒子都有哪些特征:内容的高度,内容的宽度,边框线,内填充,外边距。

上下外边距合并问题:上下两个块元素,如果每一个都指定了四个外边距, 那么上下外边距合并后会取较大的外边距。

同一个class属性, 可以指定多个类名样式,多个类样式之间用空格隔开。

场景: 当两个块元素具有相同的特性,但是还有部分不一样的时候使分开处理。

浏览器兼容性简介

一个网页在不同的浏览器下, 显示的效果可能不一致, 这所谓”不兼容”

兼容性调试, 主要调试IE8,IE7,IE6,firefox。

IE6 浏览器的调试工具: IETESTer

兼容性从以下撒个方面来讲解

  • 全局CSS设置
  • 常用兼容性技巧
  • CSS HACK

常用的兼容性调试技巧

1 实现所有浏览器主页居中

Firefox 下主页居中代码: .box{margin: 0px auto}

IE5.5 下主页居中代码: body{text-align:center}

2 单行文本上下居中

h1{ height: 30px; line-height:30px}

3 左右margin会加倍(IE6)

解决的方案: 使用 display:inline; //将其转为行内元素,避免此问题

注意: 排版的时候能使用padding解决的,坚决不用margin。如果实在想用的话,就使用其中一边。

全局CSS设置

1 清除所有标记的内外边距

body、ul、li、a、img、p、input{margin:0; padding:0}

2 去除项目符号或编号前面的符号

ul、ol、li{list-style: none;}

3 全局连接效果

a:link,a:visited{color:#444; text-decoration:none}
a:hover{color:red}

4 网页中所有的文字大小颜色

body{font-size: 12px; font-family:宋体; color:#ccc;}

5 去除图片的连接边框线

img{border:0}

6 全局的类样式

.floatL{float:left;}
.floatR{float:right;}
.clear{clear:both;}
.blank10{ height:10px; clear:both;}
.red{ color:red}
.blue{color:red}

CSS HACK

针对不同浏览器,书写不同的CSS代码的过程,成为”CSS HACK

也就是说: 写一个CSS代码,让IE6识别,其他浏览器不识别。

以下这些符号实在CSS属性的前面加的。用于分辨不同的浏览器版本。

"*"IE6和IE7都识别。        如: .box{*background-color:red;}
"-" 只有IE6识别。如 .box{_background-color:green;}

CSS HACK 不是W3C的标准,因此,尽量少用。