CSS基础知识

一.CSS基础

这一部分仅仅是Java学习中学的简单的CSS记录，还没有深入学习。

1. 概念

   CSS，全称：Cascading Style Sheets，层叠样式表。

   层叠的意思就是，多个样式可以作用在同一个html元素中，同时生效

2. 使用方式

   CSS有三种调用方式：

   • 内联样式

     在html标签内使用style属性指定css代码。

     比如：<div style="color:red">hello</div>

   • 内部样式

     在html的head标签内，定义style标签，style标签内写css代码

     比如：

     <style>
     div {
         color:red;
     }
     </style>
     

   • 外部样式

     1. 在外部定义css资源文件
     2. 在head标签内，定义link标签，引入外部css资源文件

     比如：<link rel="stylesheet" href="css/a.css">

     注意：外部样式也可以写成如下形式

     <style>
     @import "css/a.css";
     </style>
     

3. CSS语法

   格式：

   选择器 {
       属性名1：属性值1;
       属性名2：属性值2;
       ...
   }
   

4. CSS选择器

   选择器有很多分类

   • 基础选择器

     1. 元素选择器：选择具有相同标签名的元素

        语法为：标签名 { }

     2. id选择器：选择具有id属性值的元素（html页面中id唯一）

        语法为：#id属性值 { }

     3. 类选择器：选择具有相同class属性值的元素

        语法为：.class属性值 { }

     优先级为：ID选择器 > 类选择器 > 元素选择器

   • 扩展选择器

     1. 选择所有的元素(使用*号)

        语法：* { }

     2. 并集选择器(中间使用逗号)

        语法：选择器1,选择器2 { }

     3. 子选择器(父在前，子在后，中间用空格)

        语法：父选择器 子选择器 { }

     4. 属性选择器

        语法：元素名称[属性名="属性值"] { }

     5. 伪类选择器(选择一些元素具有的状态)

        语法：元素:状态 { }

        比如：<a>有4种状态

        • link：初始化的状态
        • visited：被访问过的状态
        • active：正在访问的状态
        • hover：鼠标悬浮状态

5. CSS属性

   • 字体和文本

     1. font-size：字体大小
     2. color：文本颜色
     3. text-align：对齐方式
     4. line-height：行高（行高和height一样，可以实现文字垂直居中对齐）

   • 背景

     background：设置背景

     比如：body {background:#ffffff url('img_tree.png') no-repeat right top;}

   • 边框

     border：设置边框

     比如：border:5px solid red;

   • 尺寸

     width：宽度

     height：高度

   • 盒子模型（控制布局）

     margin：外边距

     padding：内边距

     • 默认情况下内边距会影响整个盒子的大小
     • **box-sizing:border-box; **设置盒子的属性，让内边距不会影响盒子的大小，width和height就是盒子最终的大小

     float：浮动，有左浮动left，和右浮动right