css学习笔记

CSS

用于渲染HTML元素标签的样式

使用方法(样式表)

• 内联样式：在HTML元素中使用<style>属性

  • 应用到个别元素
  • <元素名 style="">

• 内部样式表：在HTML头部用<style>元素来包含CSS

  • 应用于单个文件
  • <style type="text/css"></style>

• 外部引用：使用外部CSS文件

  • 应用到多个页面
  • <link rel="stylesheet" type="text/css" href="文件名.css">
  • 每个页面使用 标签链接到样式表。 标签在（文档的）头部
  • 浏览器从“文件名.css”中读取样式声明并根据它来格式文档。该文件不能包含任何HTML标签。

• 多重样式

  如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

  内联样式> 内部样式>外部样式 > 浏览器默认样式

  如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

css规则

选择器：

需要改变样式的HTML元素

• id选择器

  id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。（一般仅有一个）

  HTML元素以id属性来设置id选择器（跟在标签名后，>前）

  CSS 中 id 选择器以 “#” 来定义（在<style>标签内

• class选择器

  class 选择器用于描述一组元素的样式（用大括号{}括起），class 选择器有别于id选择器，class可以在多个元素中使用

  class 选择器在HTML中以class属性表示（跟在标签名后，>前）

  在 CSS 中，类选择器以一个点"."号显示

• 层次选择器（不改变自身样式）

  • body：下面所有级
  • body>：下一级
  • +：同级相邻向下
  • ~：同级向下

• 属性选择器(可以是任意属性)

  /*带有id的a元素*/
  a[id]{}
  
  a[id=id名]{}
  a[class="class名"]{}
  
  /*class中包含……的a元素*/
  a[class*="……"]{}
  
  /*href以http开头的a元素*/
  a[class^=http]{}
  
  /*clas以……开头的div元素（需要包含字母）*/
  div[class$=……]{}
  

• 结构伪类选择器

  /*ul 的第一个li子元素*/
  ul li:first child{}
  /*当前元素的上一级元素的第n个元素，且是该元素*/
  p:nth-child(n){}
  /*当前元素的上一级元素的第n个该元素*/
  p:nth-of-type(n){}
  

一条/多条声明：

每条声明以分号;结束，整体以大括号{}括起

• 属性：样式属性
• 值：属性的值，与属性被冒号:分开

背景

属性	说明	例子
background-color	设置背景颜色	h1 {background-color:#6495ed;}
background-image	设置背景图	body {background-image:url(‘paper.gif’);}
background-repeat	背景图水平或垂直平铺或不平铺	background-repeat:repeat-x;background-repeat:no-repeat;
background-attachment	背景图固定/随着页面其余部分滚动	background-attachment: fixed;(固定的背景图像)
background-position	改变图像在背景中的位置	background-position:right top;

为了简化这些属性的代码，可以将这些属性合并在同一个属性中：body {background:#ffffff url(‘img_tree.png’) no-repeat right top;}

（依照上表顺序）

文本格式

属性	说明	例子
color	颜色	body {color:red;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255);}
text-align	对齐方式	h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;}（每一行被展开为宽度相等，左，右外边距是对齐）
text-decoration	文本修饰	a {text-decoration:none;}（删除链接下划线） h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;}
text-transform	指定一个文本中的大小写字母	p.uppercase {text-transform:uppercase;}(全部大写） p.lowercase {text-transform:lowercase;}（全部小写） p.capitalize {text-transform:capitalize;}（单词首字母大写）
line-height	行高
text-indent	指定文本的第一行的缩进	p {text-indent:50px;}
vertical-align	水平对齐	img，span{ vertical-align:middle }

字体

属性	说明	例子
font-family	字体（字体系列的名称超过一个字，它必须用引号）	p{font-family:“Times New Roman”, Times, serif;} （设置几个字体名称作为一种"后备"机制）
font-style	字体样式	p.normal {font-style:normal;}（正常） p.italic {font-style:italic;}（斜体） p.oblique {font-style:oblique;}（倾斜）
font-size	字体大小（可填像素，em，百分比）	h1 {font-size:40px;}

用em代替像素:

1em和当前字体大小相等，在浏览器中默认的文字大小是16px，因此，1em的默认大小是16px。

链接

属性：

• a:link - 正常，未访问过的链接
• a:visited - 用户已访问过的链接
• a:hover - 当用户鼠标放在链接上时
• a:active - 链接被点击的那一刻

可以设置背景颜色，字体颜色，进行文本修饰等。

a.class:hover{}

列表

属性：

• list-style-type:

  有序	无序
  upper-roman（罗马数字）	circle
  lower-alpha（小写字母）	square
  	none
  	decimal（数字）

• list-style-image: url()

  指定列表项标记的图像

1. 边框

   属性：

   • 边框宽度：border-width

     • 具体值（单位px或em）
     • 关键字：think，dium，thin（具体宽度可自定义）

   • 边框样式：border-style

     • none（无）
     • dotted（虚线）
     • solid（实线）
     • double（两个边框，宽和border-width相同）
     • 其他

     可有1-4个值

     可以单独设置各边（top/right/bottom/left）

   • 边框颜色：border-color

     需要先设置边框样式

display

• block：块元素
• inline：行内元素
• inline-block：是块元素，但可以内联

float

• clear：元素周围不允许有浮动元素
  • right：右侧
  • both：两侧

父级元素塌陷问题:

1. 增加父级元素高度

2. 增加一个空的<div>清除浮动

3. overflow：hidden；

4. 在父类添加一个伪类

   #id：after{
       content：'';
       display:block;
       clear:both;
   }
   

定位

1. 相对定位
2. 绝对定位（相对父级元素或浏览器）
3. 固定定位

层级

需先定位

z-index：number（number大的在上层，number>0）

透明度：opacity:

css注释

/* 注释*/

css盒子模型

• Margin——外边距【透明】

  两个盒子靠在一起外边距取大的。

• Border——边框

• Padding——内边距【透明】

• Content——内容（宽度通过width设置）

---

参考
[1]https://www.runoob.com/css/css-tutorial.html