CSS基础知识

CCS基础知识

  • 简介
  • 嵌入方式
    • 样例
    • 内联样式
    • 内联样式表
    • 外联样式表
  • 选择器
    • 样例
    • 通配选择器
    • 标签选择器
    • 类选择器
    • id选择器
    • 集体声明
    • 优先级
  • CSS样式
    • 单位
    • 颜色
    • 文本
    • 字体
    • 背景
    • 超链接
    • 列表
    • 表格
  • 盒子模型
    • < div >的属性
      • border属性
      • padding&margin属性
    • 合并和居中
    • 定位机制
      • 文档流
        • block元素
        • inline元素
        • inline-block元素
      • 浮动定位
        • float属性
        • clear属性
      • 层定位
        • position属性
        • left/right/bottom属性
        • z-inde属性

简介

基础语法
选择器{ 属性:属性值 }
声明:属性+属性值

嵌入方式

样例

<head>
	<title>---title>
	<style type="text/css">           /*内联样式表*/
		*{...}
	style>
    <link rel="stylesheet" href="外联范例.css">    /*外联样式表*/
head>
<body>
	<p style="color:red">内联样式p>
body>

内联样式

当样式仅在一共元素上应用一次时
将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势

内联样式表

内嵌样式在head标签内
当单个文档需要特殊样式表,可以使用内部样式表
内部样式表只对当前页面有效

外联样式表

当样式需要应用于很多页面时,通常使用外部样式表
Rel属性:规定当前文档与被连接文档之间的关系

选择器

样例

/*特殊性值:0,0,0,0*/            /*css优先级*/
*{color:blue;}
/*特殊性值:0,0,0,1*/
a{color:yellow;}
/*特殊性值:0,0,1,1*/
.demo a{color:black;}
/*特殊性值:0,1,0,1*/
#demo a{color:orange;}
/*特殊性值:0,1,0,2*/
div#demo a{color:red;}
/*特殊性值:1,1,0,1*/
#demo a{color:green !important;}

通配选择器

*{···}

标签选择器

p{···}

类选择器

.classname §{···}
class属性
多个class选择器混用,用空格分开

id选择器

#idname §{···}
id选择器不可以多次使用

集体声明

body{···}
p,a{···}

优先级

css优先级就是给制定的css声明一个权重,它由匹配的选择器中每一个选择器类型的数值决定
权重计算

  • 通配选择器*对特殊值没有贡献,加0,0,0,0,
  • 元素和伪元素,加0,0,0,1
  • 类选择器,属性选择器或伪类,加0,0,1,0
  • ID选择器的特殊性值,加0,1,0,0
  • !important,特殊性加1,0,0,0
    !important为开发者提供了一个增加样式权重的方法,让浏览器首先执行这个语句,但是会破坏样式表中固有的级联规则
div{
	margin-left:20px!important;
    margin-left:40px;
}
  • 内联样式>内部样式表>外部样式表

CSS样式

单位

CSS基础知识_第1张图片

颜色

CSS基础知识_第2张图片

文本

CSS基础知识_第3张图片

字体

font: 斜体 粗体 字号/行高 字体
CSS基础知识_第4张图片

背景

background:颜色 图片 repeat
CSS基础知识_第5张图片

超链接

a:hover必须位于a:linke和a:visited之后
a:active必须位于a:hover之后
CSS基础知识_第6张图片

列表

CSS基础知识_第7张图片

表格

未合并表格边框之前,表格具有双线条边框
(∵table,th以及td元素都有独立的边框)
CSS基础知识_第8张图片

盒子模型

CSS基础知识_第9张图片
1.页面元素的大小
2.边框样式
3.与其他元素之间的距离

  • 页面中的所有元素都可以看成一个盒子,占据一定的页面空间
    CSS基础知识_第10张图片
  • IE盒子模型(content部分包含了border和padding)
    CSS基础知识_第11张图片

< div >的属性

border属性

border:width style color
CSS基础知识_第12张图片

padding&margin属性

(只有值为0时才能没有单位,不然单位取值:px,%(相对于外层盒子的宽度和高度))
CSS基础知识_第13张图片

合并和居中

CSS基础知识_第14张图片
注:margin的合并:垂直方向合并,水平方向不合并

  • 图片,文字水平居中 text-align:center
  • div水平居中margin:任意值 auto;
  • 文字垂直居中:设置inline-height和包含文字的那个DIV的Height一样高

定位机制

盒子在页面上的位置,怎么排列问题

文档流

block元素

  • 特点:独占一行/可以设置元素的height,width,margin,padding
  • 常见的block元素:< div >< p >< h1 >···< h6 >< ol >< ul >< table >< form >

inline元素

  • 特点:不独占一行/width,height不可设置
  • 常见的inline元素:< span >< a >

inline-block元素

  • 特点:不独占一行/height,width,margin,padding都可设置
  • 常见的inline-block元素:< img >
    CSS基础知识_第15张图片

浮动定位

float属性

当设置浮动时,已经脱离原来文档流,其他元素占据原来元素的位置CSS基础知识_第16张图片

  • left:左浮动
  • right:右浮动
  • none:不浮动
    CSS基础知识_第17张图片

clear属性

CSS基础知识_第18张图片

层定位

希望网页的元素可以层叠在另一个元素上面,出现叠加和覆盖的效果

position属性

CSS基础知识_第19张图片

  • fixed特点:不会随浏览器窗口的滚动条滚动而变化
  • relative&absolute
    CSS基础知识_第20张图片

left/right/bottom属性

z-inde属性

z-index值大的在商城
CSS基础知识_第21张图片

你可能感兴趣的:(前端)