CSS(网页外观、布局设计)

1. 概述

CSS是Cascading Style Sheets（级联样式 ）

CSS与HTML的关系 ：HTML是网页内容； CSS定义页面的样式

2.基本语法

行内样式表：开发用的少

内嵌样式表：将css代码写在head头部标签中，并用styli标签定义

外部样式表：将所有样式放在一或多个.CSS外部样式表文件中，通过link标签将其链接到HTML文档中

 
/* css中只有属性 */
p{color: aqua;font-size: 30px;}

    
        
        
    
        
        

        
        

    
    
        

             CSS是Cascading Style Sheets（级联样式表）。
        
        
        
         

        
    

3.选择器

id选择器：通过标签的id属性选择唯一的一个标签

类选择器：通过标签的class属性选择一组标签

标签选择器：通过标签名进行匹配

通配选择器：选页面中所有的标签

分配器有优先级：

由高到低： id选择器>类选择器>标签选择器>通配选择器

匹配越多的选择器，优先级越低

    
        
        
        
    
    
        
 标题
        
        
        

             CSS是Cascading Style Sheets（级联样式表）。
        
        

             CSS是Cascading Style Sheets（级联样式表）。
        
        

             CSS是Cascading Style Sheets（级联样式表）。
        
    

4.文本

基本属性
color：  字体颜色
font-size：  字体大小
font-family：  字体
text-align：  文本对齐
text-decoration:line-through：  定义穿过文本下的一条线
text-decoration:underline：  定义文本下的一条线
text-decoration:none：  定义标准的文本
font-style: italic  斜体文本
font-weight:  字体粗细
line-height:  设置行高
letter-spacing:  可以指定字符间距
text-indent:  用来设置首行缩进

5.背景

基本属性
background-color  背景颜色
background-image  背景图片
background-repeat  背景重复
background-size  背景尺寸
background- position  背景位置

6.列表

列表属性可以放置、改变列表项标志，或者将图像作为列表项标志

    
        
        
        
    
    
        

            
CSS是Cascading Style Sheets（级联样式表）。
            
CSS是Cascading Style Sheets（级联样式表）。
        
        
        

            
CSS是Cascading Style Sheets（级联样式表）。
            
CSS是Cascading Style Sheets（级联样式表）。
        
    

7.伪类

表示标签的特殊状态。

语法：

：hover 当鼠标移入到标签上时，切换到此样式表

：active 当鼠标点击标签时，切换到此样式表 ：focus 当鼠标聚焦到可输入的标签时，切换到此样式表

8.透明度

用opacity定义透明效果，

规定不透明度：0.0(完全透明)——1.0(完全不透明)

9.标签分类

块级标签：独占一行

默认的宽与浏览器/父标签一致

若无内容，默认高为0

可设置宽高

主要用来布局网页；

行级标签：占内容大小

不能设置宽高

用来包裹文字内容；

行级块：可设置宽高，不占一行

行级块标签：可设置宽高，不占一行

一般情况下使用块级标签包含行级标签，不使用行级标签包含块标签

a可以包含任何标签，除去a本身； p标签不可以包含任何的块标签

10.盒子模型

可分为四部分：

内容区(content)

–内边距(padding)是标签内容区与边框以内的空间。 ●内边距会影响整个盒子的大小

–边框(border)

–外边距(mar gin)一个标签距离另一标签的距离，不影响标签实际大小，但影响标签实际位置

11.浮动

浮动使标签脱离原文档流，漂浮起来

使用float属性。 给浮动标签外添加div，此div未浮动，仍在原始的文档流中（二维平面）

浮动问题：浮动后的标签不占原来的文档流空间，未将父标签撑开，称为高度塌陷，会影响后面标签的布局

解决办法：

1.为父级标签设置高度，但太麻烦

2.清除浮动影响，

清除后会将父级标签自动撑开和浮动标签高度一致

12.定位

相对定位(relative)

相对于其起点移动，移动后原来的位置还被占用 通过position:relative; 开启相对定位 特点：

1.开启标签的相对定位后，不设置偏移量时，标签不会发生任何变化 2.相对定位是相对于标签在文档流中原来的位置进行定位 3.相对定位的标签不会脱离文档流

绝对定位

通过position:absolute; 开启相对定位

开启了标签的绝对定位，标签会漂浮起来（脱离原文档流）；

绝对定位是相对于离它最近的，开启了定位的父标签及浏览器的窗口（不建议）进行定位；

故，一般开启标签的绝对定位都会先开启其父级标签的相对定位；

绝对定位会改变标签的性质，行级标签变为块级标签