CSS3记录

• 摘要
• 基础知识
  • 语法
    • 选择器 {属性:值}
    • 注释
  • CSS样式表的插入
  • 选择器类型
  • 属性
    • 背景属性
    • 文本属性
    • 字体
    • 链接
    • 列表
    • 表格
    • 盒模型
    • 边框（Border）
    • 显示与隐藏
    • 定位属性
    • 浮动
    • 伪类
    • 伪元素
    • 导航栏
    • 下拉菜单
    • 图像

[TOC]

摘要

学习参考文献

W3CSchool

CSS：Cascading Style Sheets 层叠样式表

基础知识

语法

选择器 {属性:值}

h1 {color:blue; font-size:12px;}

​ 选择器是要改变样式的HTML元素

​ 属性是样式属性（style attribute）

注释

/*这个是注释*/

CSS样式表的插入

1. 外部样式表

   .CSS后缀的文件，内部不含HTML标签。

2. 内部样式表

   在HTML文件头部的<style>标签内定义。

3. 内联样式

   在HTML标签内，使用style属性定义。

选择器类型

总共四种：内联选择器 > id选择器 > 类选择器 > 标签选择器

1. 标签选择器

   在HTML的<style>标签内写的CSS语法，用于描述一类HTML标签的样式属性。

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

2. 类选择器

   在HTML的<style>标签内写的CSS语法，用于描述一类元素的选择器。

   <!--在style中设定center类的样式-->
   <style>
    .center
       {
       	text-align:center; 
       }
    p.another 
       {
           color:red
       }
   </style>
      
   <!--之后使用的方法-->
   <h1 class="center">类选择器，使用通用的类的</h1>
   <p class="another">类选择器，只用于p属性的类的</p> 
   

3. id选择器

   和类选择器类似，但是不是用HTML元素的class属性设置，而是用id属性设置。

   <!--在style中设定指定id para1的样式-->
   <style>
       #para1
       {
       	text-align:center;
       	color:red;
       } 
   </style>
      
   <!--之后使用的方法-->
   <p id="para1">你好，世界！！！</p>
   

4. 内联选择器

   直接在标签内部写明

   <h3 style="color:red;">嘻嘻</h3>
   

5. 组选择器

   td, th { /*td和th都会应用*/
         border: 1px solid #ddd;
         padding: 8px;
       }
   

6. 后代选择器

    #customers td { /*(得是id=customer的td类才会被应用)*/
            border: 1px solid #ddd;
            padding: 8px;
          }
   

7. 关系选择器

   1. 临近兄弟元素选择器A+B

      选择紧接在第一个元素A之后的元素B，且两者要有相同的父元素。下面的例子选取了紧接在img元素后的p元素

      img + p {
        font-style: bold;
      }
      

   2. 兄弟元素选择器A~B

      选择在第一个元素A之后的所有同层级元素B，两者无需紧接。

      div~p
      {
      	background-color:yellow;
      }
      

   3. 直接子元素选择器A>B

   选择元素A的所有元素B子元素

      div>p
      {
          backgorund-color:yellow;
      } 
   

属性

背景属性

文本属性

属性名	用途	例子	备注
color	指定文字颜色	body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);}	可以用 - 16进制：#00ff00 - RGB值：rgb(255,0,0,) - 颜色名词：red 描述
text-align	指定文本对齐方式	h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;}	justify: 每一行展开宽度相等
text-decoration	设置或者删除文本装饰	1. 可以用来删除连接的下划线： a {text-decoration:none;} 2. 可以用来装饰文字： h1 {text-decoration:overline;} h2 {text-decoration:line-through} h3 {text-decoration:underline}
text-transform	设置文本中的大小写	1. 全大写：p.uppercase {text-transform:uppercase;} 2. 全小写：p.lowercase {text-transform:lowercase;} 3. 每个单词首字母大写：p.capitalize {text-transform:capitalize;}
text-indent	设置文本缩进长度	p {text-indent:50px;}
word-spacing	设置单词之间的间隔	p{word-spacing:30px;}
letter-spacing	设置字之间的间隔	h1 {letter-spacing:2px;} h2 {letter-spacing:-3px;}
line-height	设置行距	p.small {line-height:70%;}
white-space	设置根据浏览器窗口自动换行	p{white-space:nowrap;}	设置为nowrap的话不会自动换行
text-shadow	添加文本阴影	h1 {text-shadow:2px 2px #FF0000;}

字体

字体有两种分类：

• 通用字体系列：拥有相似外观的字体组合
  • serif: 有锐利边缘的字体
  • sans-serif: 和serif相反，比较圆滑
  • monospace: 等宽字体
• 特定字体系列
  • Times、宋体之类的专指某种字体的

链接

连接共有四种样式：

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

设置CSS:link选择器时，a:hover必须在a:link和a:visited后面，a:active必须在a:hover后面

其他的属性类似文本属性

例子：

a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

列表

CSS可以将HTML中列表的格式进行统一的设置。

属性名	用途	例子	备注
list-style-type	列表项标记（即列表前面的小圆点）	1. 无序列表： ul.a {list-style-type: circle;} ul.b {list-style-type: square;} 2. 有序列表： ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;}	none:不用项目符号 disc:实心圆 circle:空心圆 square:实心方块 decimal:阿拉伯数字 lower-alpha:小写英文数字 upper-alpha:大写英文数字 lower-roman:小写罗马数字 upper-roman:大写罗马数字
list-style-image	使用图像作为列表项标记	ul{list-style-image: url('sqpurple.gif');}
list-style-posion	设置列表项的位置	inside：ul.inside {list-style-position: inside} outside：默认值 ul.outside{list-style-position: outside}

表格

表格有一个:nth-child伪类，可以处理规律的表格元素变化（比如奇偶行不同的背景色）

#customers tr:nth-child(even){background-color: #f2f2f2;}  

我们还可以使用:hover类，即鼠标移到表格行上时改变元素：

#customers tr:hover {background-color: #ddd;}

盒模型

用于设置HTML元素边距、边框、填充和内容放置位置。

/*CSS设置*/
div.ex
    {
    width:220px;
    padding:10px; 
    border:5px solid gray;
    margin:0px;
    /* 左右margin：margin-left和margin-right。居中用margin:auto或者margin-right:auto*/
    }

<!--HTML设置-->
<div class="ex">这个框的宽度就是250</div>

这种设置方法中，可以使用两种方法：

• 3pt或0.2em等固定的长度值
• 百分比：定义为父类的比例

边框（Border）

显示与隐藏

定位属性

定位属性用于指定元素在文档中的定位方式，而top/right/bottom/left属性决定了元素的最终位置

浮动

伪类

伪元素

伪元素需要用::区分于伪类的:（W3C标准也可以不用）

导航栏

在HTML中，导航条实际上时连接列表，用<ul>定义无序列表。

下拉菜单

使用:hover伪类和display隐藏和显示元素

<style>
/* 容器 <div> - 需要定位下拉内容 */
.dropdown {
    position: relative;
    display: inline-block; }
/* 下拉内容 (默认隐藏) */
.dropdown-content {
    display: none;
    position: absolute; }
/* 下拉菜单的链接 */
.dropdown-content a {
    text-decoration: none;
    display: block; }
/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {background-color: #f1f1f1}
/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
    display: block; }
/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
    background-color: #3e8e41; }
</style>

可以用下拉菜单实现的：图片在网页上的放大查看；导航条的细节下拉。

图像

• ← Previous Post
• Next Post →