Szy'sky Blog
所有文章 标签 分类
Szy'sky Blog

目录

CSS语法格式

 收录于 css 入门
   约 4636 字   预计阅读 10 分钟    次阅读  

自学小笔记

CSS语法格式

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

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

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

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

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

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

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

CSS选择器

1.基本选择器

*选择器 又叫通配符

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

标签选择器

  • 描述:将匹配指定的HTML标签。
  • 语法:h1{color:red} 将指定的标记改变其状态。

class选择器

  • 描述:给一类HTML标签加样式，这里所指的每个HTML标记都应该有一个class属性。class属性是公共的属性。
  • 语法:.className{color:red} 类选择器必须以.开头，后面跟HTML的class的属性。(类选择器如果有多个相同可以用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光标类型

功能：网页中光标的类型

取值: help、wait、pointer(手形光标)等。

常用标签属性

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
取值：static、fixed、relative、absolute

  • 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标记,都有一些公共的属性: class、id、title、style。
  • 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的标准，因此,尽量少用。

更新于 2016-04-03
 css, 入门
返回 | 主页