首页 > 代码库 > CSS基础
CSS基础
CSS 汉译层叠样式表
样式表创建： 内部样式表
<style type="text/css">
body{background-color:red}
p{margin-left:20px}
</style>
外部样式表
<link rel="stylesheet" type="text/css" href = "http://www.mamicode.com/mystyle.css">
行内样式表（内联样式表）
<p style = "color:red">
创建内部样式表语法：
<style type = "text/css">
/*CSS语句*/
<style>
说明：用style元素来创建样式表时，必须将改标记写在文件头部<head></head>之间
CSS由选择器（选择符）和声明（属性和属性值）两部分组成
CSS语法： 选择符{属性 ： 属性值；}
说明：属性和属性值之间用":"分隔，声明必须放在花括号内
一个选择符可以有多个属性，属性和属性之间用分号隔开
一个属性可以有多个属性值，属性值和属性值之间用空格分开
选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或制定名称的元素。
css中也可以继承：嵌套内层的标签如果没有定义自己的样式，则使用外层的样式，若是定义了自己的样式则使用自己定义的样式
常用选择符有：
元素/类型选择符：语法：元素名称1,元素名称2{属性：属性值 ；属性:属性值；...}
ID选择符:
语法： #id名{属性 ： 属性值；}
<div id = "top"> <p></p> <h1><h1> </div>
#top{weight:100px ; height:50px ...}
如果只想改变p标签的css样式，不改变h1标签，则可以在id后面空格+标签名
#top p{weight:100px ; height:50px ...}
id不能是关键字，一个id名称只能对应文档中一个具体的元素对象
最大用处：创建网页的外围结构
常和派生选择器组合使用
<p id="pid"> <strong>p标签</strong></p>
<h1> <strong>h1标签</strong></h1>
若是想为p标签内的strong标签增加样式：
#pid strong{
color:red;
}
class选择符:
语法：.class名{属性 ： 属性值；}
<div class ="top"> </div>
.top{weight:1010px; height:200px ...}
用法：class选择符更适合定义一类样式
结合元素选择器： a.class{} 直接对指定元素设置效果，其他的同类名标签则不受影响
多类选择器：.class.class{} 实现多个样式效果
群组选择符:
语法： 选择符1,选择符2,选择符3...{属性 ：属性值}
包含选择符:
伪类选择符:
伪对象选择符
派生选择器：主要用于嵌套的标签内具体定义某一个标签的具体样式效果
<p> <strong>p标签</strong></p>
<h1> <strong>h1标签</strong></h1>
若是想为h1标签内的strong标签增加样式：
h1 strong{
color:red;
}
若是单独为strong标签增加效果
strong{color:blue} 但是增加此选择器不会更改h1内的strong的效果样式，只会更改p内strong的效果，因为h1内的strong标签已经单独实现样式效果们不会被覆盖
属性选择器/属性和值选择器
内部样式定义：
<style type="text/css">{
[title]{
color:red;
}
[title="ti"]{
color:bule;
}
}
<p title="ss">属性选择器</p>
<p title="ti">属性和值选择器</p>
css中若是为title指定具体的值那么只有当title的值相同时才能实现样式效果
根据部分属性值选择
<style type="text/css">{
[title~="title"]{
color:bule;
}
}
<p title="title">可以显示效果</p>
<p title="title ti">可以显示效果</p>
<p title="ss">不可以显示效果</p>
<p title="ti">不可以显示效果</p>
title~="title" 属于模糊查询，只有当title属性的属性值这种含有完整的title时才可以实现样式效果
通配符
*{
通常放入margin、padding属性，若是需要该属性则自行在标签内再定义
通配符选择器会改变所有的没有指定样式效果的效果
}
后代选择器：可以选择作为某元素后代的元素
<p> this is <strong>my <i>web</i></strong> page</p>
若是为my添加css样式则： p strong{ 属性：属性值； }
若是为web添加样式则： p strong i{属性：属性值；} 也可直接查找：p i{}，这样只会为i标签增加样式，strong不会受到更改。
子元素选择器：与后代选择器相比，子元素选择器只能选择作为某子元素的元素，不能像后代选择器那样直接查找
<p> this is <strong>my <i>web</i></strong> page</p>
是为my添加css样式则： p>strong{ 属性：属性值； }
若是为web添加样式则： p>strong>i{属性：属性值；} 不能像后代选择器直接查找：p>i{}(这样是不能更改样式的)，
相邻兄弟选择器：可选择紧接在另一个元素后的元素，且二者有相同父元素 eg： h1+p{}；
css背景：css允许应用纯色作为背景，也允许使用背景图片作为背景。
background-attachment ：背景图像是否固定或者随着页面的其他部分滚动
background-color ：设置元素的背景颜色
background-image:url("图片名称 a.jpg") ：设置图片为背景
background-position ：设置背景图片的起始位置
background-repeat ：设置背景图片是否及如何重复
background-size：规定背景图片的尺寸
background-origin:规定背景图片的定位区域
background-clip:规定背景的绘制区域
css文本：css文本属性可定义文本的外观，通过文本属性可改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进等
color：文本颜色 direction： 文本方向 line-height：行高
letter-spacing：字符间距 text-align：对齐元素中的文本
text-decoration：向文本添加修饰
css字体：css字体属性定义文本的字体系列、大小、加粗、风格和变形等
font-family：字体系列 font-size：字体尺寸 font-style：字体风格
font-variant：以小型大写字体或正常文本字体显示文本 font-weight：字体粗细
css链接的四种状态：
a:link: 普通的、未被访问的链接
a:visited: 用户已访问的链接
a:hover: 鼠标指针位于链接的上方
a:active: 链接被点击的时刻
<a href="http://www.mamicode.com/链接地址">链接名</a>
更改状态 ：a:link{color:颜色;} a:visited{color:颜色;}...分别改变不同状态时的颜色
text-decoration属性大多用于去掉链接的下划线
css列表：css列表属性允许你放置、改变列表标志，或将图像作为列表项标志
list-style ：简写列表项 list-style-image：图像
list-style-position：标志位置 list-style-type：类型
css表格：表格属性可极大的改善表格的外观
表格边框：border：1px solid 颜色值；
折叠边框 ：border-collapse：collapse；
表格宽高：width：11px；height：22px；
表格文本对齐：text-align：center；
表格内边距：padding：5px；
表格颜色：background-color：颜色值；
css轮廓：主要用来突出元素的作用
outline：轮廓属性 outline-color：轮廓颜色
outline-style：轮廓样式 outline-width：宽
css盒子模型
盒子模型的内容范围包括：margin外边距、border边框、padding内边距、content内容部分组成
内边距：内边距在content外，边框内
属性：padding：设置所有边距 padding-bottom：设置底边距
padding-left;左边距 padding-right：右边距 padding-top：上边距
边框:创建出效果出色的边框，并且可以适用于任何元素
border-style：可以创建十多种非继承的样式，包括none
border-top/bottom/left/right-style：可以根据需求设置边框的某一边的边框效果
border-width：11px；是设置全部边框的宽度
border-top/bottom/left/right-width：可以设置任意一边的边框宽度
border-color：边框的颜色，同上面也可以设置某一边框的颜色
border-radius：圆角边框
box-shadow：10px（向右移）10px（向下移）5px（透明度）color颜色值；
边框阴影 border-image：边框图片
外边距：围绕在内容边框的区域就是外边距，默认是透明的
外边距接受任何长度单位、百分数值
margin：设置所有边距
margin-top/bottom/left/right-width：设置任意一边的边距
外边距合并：是一个叠加的概念，意思是两个相邻的盒子模型的外边距会进行叠加，只会出现一个外边距的效果。
css定位：改变元素在页面上的位置
定位机制
普通流：元素按照其在HTML中的位置顺序决定排布的过程
浮动：float属性可用的值
left：向左浮动 right：向右浮动 none：不浮动 inherit：从父级继承浮动属性
clear属性：去掉浮动属性（包括继承来的属性）
left、right、both：去掉左右或两侧的浮动
inherit：从父级继承来clear的值
绝对布局：
属性：position：static、relative相对、absolute、fixed固定。把元素放在一个静态的、相对的、绝对的或固定的位置中
top/bottom/left/right-style：元素向某一方向偏移量
overflow：元素溢出其区域发生的事情
clip：元素显示的形状
vertical-align：元素垂直对齐方式
z-index：元素的堆叠顺序
对齐操作：
1、使用margin属性进行水平对齐 使用 margin-left:auto; margin-right:auto;可设置居中的样式效果
2、使用position属性进行左右对齐 使用 position：absolute；left/right：opx；使其居左/居右
3、使用float属性进行左右对齐 使用 float：left/right； 居左/居右；
尺寸操作：line-height：行高 max/min-height/width 最大/小-高度/宽度
分类操作：
cursor：规定当指向某元素之上时显示的指针类型（鼠标显示类型）
display：设置是否及如何显示元素
visibility：设置元素是否可见
导航栏：垂直导航栏、水平导航栏
2D,3D转换
通过css3转换，能够对元素进行移动、缩放、拉长或拉伸
转换是使元素改变形状、尺寸和位置的一种效果
2D转换方法：
translate()移动; transform:translate(num px,num px)
支持不同的浏览器，其他效果同理
-webkit-transform:translate(num px,num px); 支持 Safari chrome
-ms-transform:translate(px,px);支持IE
-o-transform:translate(px,px);支持opera
-moz-transform:translate(px,px);支持Firefox
rotate()旋转; transform:rotate(num deg);里面是具体的数字+度数deg
-webkit-transform:rotate(num deg);...
scale()缩放; transform:scale(宽度,高度);里面是具体的数字，表示宽度和高度，1表示不变，2表示高度放大2倍
-webkit-transform:scale(宽度,高度);...
skew()倾斜; transform:skew(x轴旋转角度，y轴旋转角度)，num deg,
-webkit-transform:skew(x轴旋转角度，y轴旋转角度);...
matrix()矩阵变形；
2D转换方法：rotateX(); transform：rotateX(num deg);里面存放旋转度数
rotateY(); 同2D一样，也需要指定浏览器
过渡
通过css3可以给元素添加一些效果
css3过渡是元素从一种样式转换成另一种样式
动画效果的css和动画执行的时间 两个方面
属性：transition 设置四个过渡属性 分别是： transition-property(过渡的名称)、transition-duration(过渡效果话费的时间)、
transition-timing-function(过渡效果的时间曲线、transition-delay(过渡效果延时多久开始，就是说当鼠标放在上面，会在delay设置的时间后再开始过渡效果)
动画：css3可以进行创建动画，但是css3的动画需要遵循@keyframes规则：规定动画的时长和规定动画的名称
多列：可以创建多列来对文本或者区域进行布局
属性：column-count 分列的数量
column-gap 每列之间的间隔距离
column-rule 每列之间间隔的线和颜色
CSS基础