CSS笔记

层叠样式表

层叠样式表：Cascading Style Sheet :CSS

主要同于标签的样式修饰：修饰内容、位置、颜色等等

操作过程中，主要注意如下环节

CSS的基本语法 CSS代码的位置 CSS选择器 常见样式

CSS基本语法

语法：
   样式名称：样式的值
如：
	color：red                         内容中文本的颜色：红色
background-color:orange                某个标签的背景颜色：橙色
font-size:22px                         标签中文本字体的大小：22像素
font-family:”宋体”                      标签中文本的字体：宋体

CSS代码的位置

在一个标准网页中，CSS代码的位置一般有三个位置
标签style属性中；用于修饰当前标签

input type=”text” style=”width:120px;height:23px;”

当前网页中，将样式包含一堆标签中【入门推荐】

外部CSS文件中专门用于定义CSS样式，引入到当前网页中使用【正式开发推荐】

index.css 样式表文件

index.html 网页文件

网页文件中，通过**link ref=”stylesheet” href=”index.css”**标签将一个样式表文件引入当前网页中操作

标签内嵌样式【不推荐】

页面内嵌样式【少量样式使用该方式操作】

外部样式【大量样式操作推荐】

CSS选择器

选择器：CSS代码中，用于选择/选中标签的语法
   修饰标签的样式：首先要选择某个/多个标签

常见CSS选择器：

选择器名称 描述
*{样式} 选中当前网页中所有标签
#id id选择器，选择网页中id属性为指定值的某个标签；只能选中一个标签【规范】
.class class选择器：选中网页中CLASS属性为指定值的对个标签；任意标签的class可以重复
tag 标签选择器：使用标签名称，直接选中当前网页中所有的该名称的标签
selector > selector2 子类选择器：子标签选择器选中selector选择器选中的标签中，直接子标签selector选中的标签
selector selector2 包含选择器选中selector选中的标签中所有的selector2选中的标签
selector：nth-of-type(num) 序号选择器|序列选择器选中第几个标签

常见样式

内容修饰样式

字体样式 font
字体	font-family
颜色	color
字号	font-size
加粗	font-weight
斜体	i

背景样式		background
背景颜色		background-color
背景图片		background-image
背景位置		background-positio
边框		border
上下左右边框	
边框颜色		border-color
边框粗细		border:10px;
定位样式
标签宽度		width
标签高度		height
页面窗口中离窗口左边的距离——外边距		margin-left
页面窗口中离窗口顶部的距离——外边距		margin-top
标签内容和标签之间的留白距离——内边距	padding

元素/标签一旦定位：说明元素可以设置宽度和高度，对标签就需要进一步的认识：

标签分类：

     行标签：标签前后不换行，标签不能设置宽度和高度
     行内块标签：标签前后不换行，标签可以设置宽度和高度
     块标签：标签前后自动换行，标签可以设置宽度和高度

标签元素的定位：样式：position

     四种定位方式：
            默认：position：static
            相对：position：relative
            绝对：position：absolute
            固定：position：fixed
    所谓定位：就是确定哪里是（0，0）原点

其他样式【C3动画样式】

CSS3的动画样式
自定义动画、动画的操作         @keyframe--animate
变形、元素的变换              transform
过度、元素发生变化前后的过度    transition

原网址：http://www.manbanzhen.top/?p=166