CSS学习笔记
CSS学习笔记
目录
- 基本概念
- 写法格式
- 外链样式
- 页内样式
- 行内样式
- 基础选择器
- 标签选择器
- class选择器
- id选择器
- 通用选择器
- 复合选择器
- 后代选择器
- 编组选择器
- 伪类选择器
- link
- visited
- hover
- active
- 文本样式
- 文本区块
- 背景样式
- 盒子模型
- padding内边距
- margin外边距
- border边框
- 浮动
- float
- 清除浮动clear
- IE浏览器的兼容问题
基本概念
层叠样式表，Cascading Style Sheets
标记语言，浏览器解释型语言
对网页中的元素进行精确控制
网页表现与内容分离的样式设计语言
写法格式
- 外链样式
通过加载后缀名为.css的文件载入使用，写在标签中。影响引入该文件的页面所有内容。
<link rel="stylesheet" href="XXX.css">
- 页内样式
在本页面内书写该样式，尽量写在标签中。只影响本页面。
<style>
选择器 { 属性 : 值; }
style>
- 行内样式
写在HTML标签内部。只影响本标签。
<html标签 style=" 属性1 : 值1 ; 属性2 : 值2 ; ">XXXhtml标签>
基础选择器
- 标签选择器
<head>
<style>
标签名 { 属性 : 值; }
style>
head>
<body>
<标签>XXX标签>
body>
- class选择器/类选择器
<head>
<style>
.name1{ 属性1 : 值1; }
.name2{ 属性2 : 值2; }
style>
head>
<body>
<标签 class="name1 name2">XXX标签>
body>
- id选择器
<head>
<style>
#name{ 属性 : 值; }
style>
head>
<body>
<标签 id="name">XXX标签>
body>
- 通用选择器
<head>
<style>
*{ 属性1 : 值1; 属性2 : 值2; }
style>
head>
<body>
<标签1>XXX标签1>
<标签2>XXX标签2>
<标签3>XXX标签3>
body>
复合选择器
- 后代选择器
<head>
<style>
.out .box{ 属性1 : 值1; }
ul li{ 属性2 : 值2; }
style>
head>
<body>
<div class="out">
<div class="box">div>
div>
<div class="box">box>
<ul>
<li>li>
<li>li>
ul>
body>
- 编组选择器
<head>
<style>
标签1,.name,#box{ 属性 : 值; }
ul li{ 属性 : 值; }
style>
head>
<body>
<标签1>XXX标签1>
<标签2 class="name">XXX标签2>
<标签3 id="box">XXX标签3>
body>
伪类选择器
link初始样式
<a href="http://">XXXa> 可在head中加入来改变初始样式：
<style>
a:link{属性名:值}
style>
visited已访问后的样式
<a href="http://">XXXa>可在head中加入来改变访问过后的样式：
<style>
a:visited{属性名:值}
style>
hover鼠标移入时的样式
<a href="http://">XXXa>--默认样式，鼠标移入时无改变>可在head中加入来改变鼠标移入时的样式：
<style>
a:hover{属性名:值}
style>
active活动样式
<a href="http://">XXXa>可在head中加入来改变鼠标点击时的样式：
<style>
a:active{属性名:值}
style>注意:
上述四种状态如果全部都要用到时，最好按照link、visited、hover、active的顺序书写。
并不是只有a标签可以用到这些样式，其他元素/选择器也可以使用，如h1:hover{}、.name:active{}等。
文本样式
| 属性 | 名称 | 值 |
|---|---|---|
| font-family | 字体 | 中文字体用引号括起，多字体使用英文逗号隔开 |
| font-size | 字号 | number |
| font-weight | 字体粗细 | normal-不加粗/bold-加粗体/100-900 |
| font-variant | 小型大写字母 | normal/small-caps |
| line-height | 行高 | number-32px/倍数-1.5em |
| text-transform | 大小写转换 | lowercase-全小写/capitalize-首字母大写/uppercase-全大写 |
| text-decoration | 文本修饰 | none/underline-下划线/overline-上划线/line-through-删除线 |
| font-style | 定义字体的风格 | normal/italic-斜体字/oblique-倾斜的文字(没有斜体的字体应采用该属性) |
注意:
使用代码缩写可减少CSS文件的大小，且更易于阅读。如：
font-family: "微软雅黑";font-size: 12px;line-height: 24px;font-weight: 900;可简写为:
font: 900 12px/4px "微软雅黑"；使用文字简化代码时，必须以字体结束，否则在实际中代码失效，字号和行高不是通过空格隔开，而是通过“/”分割，一定要注意字号在前，行高在后。
font：粗细 字号/行高 字体类型
文本区块
| 属性 | 名称 | 值 |
|---|---|---|
| letter-spacing | 字母间距 | number |
| text-indent | 文本的缩进 | number-中文的首行缩进要么是字体像素的两倍像素值，要么直接用2倍(2em)表示 |
| text-align | 水平对齐 | left/center/right |
| vertical-align | 垂直对齐 | baseline-基线/sub-下标/super-上标/top-顶部/middle-中间/bottom-底部 |
| display | 显示类型 | none-隐藏/block-块级元素(独立显示在一行，方便定义宽高)/inline-行级元素(不方便定义宽高)/inline-block-行级块元素(既能显示在一行又能定义宽高) |
| 元素 | 常见标签 |
|---|---|
| 块级元素 | h1-h6、p、div、ui、ol、li、dl、dt、dd等 |
| 行级元素 | a、span、strong、b、em、i、del、s、font等 |
| 行级块元素 | img、input等 |
背景样式
| 属性 | 名称 | 值 |
|---|---|---|
| background-color | 背景颜色 | 如：red;或 #000; |
| background-image | 背景图案 | url(images/pic.jpg);【用于在文字下添加图片，默认进行平铺，图像权重更高，会盖住颜色】 |
| background-repeat | 背景重复 | repeat(纵向和横向平铺)/no-repeat(不平铺)/repeat-x(横向平铺)/repeat-y(纵向平铺) |
| background-position | 背景定位/偏移 | 水平方向-left/center/right/number、垂直方向-top/center/bottom/number，例：right bottom;或 100px 50px; 或-10px 0px;(向下/右为正值) |
| background-attachment | 背景固定 | scroll-默认值/fixed-固定背景（不随滚动条的滑动而移动） |
注意:
背景代码简写：
background: 颜色 路径 重复 偏移 固定
这些值可以互换位置，不影响显示效果；但是偏移值是属于一个整体的，是不能拆开的。
想要单独改变某一值时，最好写完整的属性名。
盒子模型
| 属性 | 名称 | 用途 | 值 |
|---|---|---|---|
| min-width | 最小宽度 | 可以使宽度随着内容的增多而改增大 | px像素/%百分比-会根据窗口/父级大小的改变而改变 |
| min-height | 最小高度 | 可以使内容的高度随着内容的增多而增大 | |
| max-width | 最大宽度 | ||
| max-height | 最大高度 |
padding内边距
| 属性 | 名称 | 值 |
|---|---|---|
| padding-top | 上内边距 | 像素px |
| padding-bottom | 下内边距 | |
| padding-left | 左内边距 | |
| padding-right | 右内边距 |
padding会增大元素本身的大小。
简写:
padding: 10px; /*上下左右全为10px*/
padding: 10px 20px; /*上下10px，左右20px*/
padding: 10px 20px 30px; /*上10px，左右20px，下30px*/
padding: 10px 20px 30px 40px; /*按照顺时针的顺序-上右下左*/
margin外边距
| 属性 | 名称 | 值 |
|---|---|---|
| margin-top | 上外边距 | 像素px |
| margin-bottom | 下外边距 | |
| margin-left | 左外边距 | |
| margin-right | 右外边距 |
margin不会增大元素本身的大小。
简写:
margin: 10px; /*上下左右全为10px*/
margin: 10px 20px; /*上下10px，左右20px*/
margin: 10px 20px 30px; /*上10px，左右20px，下30px*/
margin: 10px 20px 30px 40px; /*按照顺时针的顺序-上右下左*/
margin: 10px auto; /*上下10px，左右会随着父级的大小的改变而自动居中改变*/
margin: 0 auto; /*水平居中在父级元素中*/有些标签会自带边距，所以有时需要清楚样式：
*{padding: 0; margin: 0;} /*通用标签，清除所有的边距*/
border边框
| 属性 | 名称 | 值 |
|---|---|---|
| border-width | 边框宽度 | number |
| border-color | 边框颜色 | 颜色值/transparent-透明 |
| border-style | 边框样式 | solid-实线/dotted-点线/dashed-虚线 |
| border-top | 上边框 | |
| border-bottom | 下边框 | |
| border-left | ||
| border-right | ||
| border-top-color | ||
| 等等… |
简写:
border: 边框宽度 边框颜色 边框样式; /*三个值位置可以互换，顺序不是固定的*/
浮动
float浮动
值：left、right、none
clear清除浮动
left-在左侧不允许浮动元素
right-在右侧不允许浮动元素
both-在左右两侧均不允许浮动元素（当浮动的子级不能撑开父级时【父级元素没有设置高度】，可在浮动的最后面加上清除浮动的样式）
IE浏览器的兼容问题
有些特殊的网站需要考虑低版本浏览器，比如政府网站、教育系统网站。
IE6双倍边距
当元素有float属性，又有margin属性时，在IE6下面显示的margin的值是设置值的两倍。
→ 将有float属性的元素添加display:inline属性。伪类选择器hover
IE6只支持a标签的CSS定义hover效果，其他标签添加hover效果没有任何作用。
→ 一方面可以使用JavaScript添加鼠标移入效果，另一方面只能将其他标签改变为a标签后再添加hover效果。定义元素的不透明度
opacity:0.5，可以改变元素的透明度，取值范围是0~1，但是IE6不支持这种透明度表现方式。
→ IE6浏览器专属的透明度属性， filter：alpha（opacity=80），取值范围是0~100。IE各个版本hack
属性hack方式
.box {_width:100px;} /* IE6专用*/
.box {*+width:100px;} /* IE7专用*/
.box {*width:100px;} /* IE6、IE7共用*/
.box {width:100px\0;} /* IE8、IE9共用*/
.box {width:100px\9;} /* IE6、IE7、IE8、IE9共用*/
.box {width:330px\9\0;} /* IE9专用*/选择器hack
*html .box{width:100px;} /*IE6*/
*+html .box{width:100px;} /*IE7*/