博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS详解
阅读量:329 次
发布时间:2019-03-03

本文共 10616 字,大约阅读时间需要 35 分钟。

一、初识CSS

(一)什么是CSS

CSS概念:Cascading Style Sheet 层叠样式表

  • 表现HTML文件样式的语言
  • 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

(二)CSS的发展史

  • 1996年 CSS1.0诞生
  • 1998年 CSS2.0
    融入了DIV+CSS的概念,提出了HTML结构与CSS样式表的分离。
  • 2004年 CSS2.1
    融入了更多高级的用法,如浮动,定位等。
  • 2010年 CSS3.0
    它包括了CSS2.1下的所有功能,是目前最新的版本,它向着模块化的趋势发展, 又加了很多使用的新技术,如字体、多背景、圆角、阴影、动画等高级属性, 但是它需要高级浏览器的支持。由于现在IE 6、IE 7使用比例已经很少,对市场企业进行调研发现使用CSS3的频率大幅增加,学习CSS3已经成为一种趋势。

(三)CSS的优势

  • 内容与表现分离
  • 网页的表现统一 , 容易修改
  • 丰富的样式 , 使得页面布局更加灵活
  • 减少网页的代码量 , 增加网页的浏览速度 , 节省网络带宽
  • 运用独立于页面的CSS , 有利于网页被搜索引擎收录

(四)CSS的基础语法

选择器{    属性1:属性值;//声明1    属性2:属性值;//声明2    ...}

注意:CSS的最后一条声明后的";“可写可不写,但是,基于W3C标准规范考虑,建议最后一条声明的结束都要写上”;"。

(五)Style标签

Style 标签在HTML文档中的位置 , 在<head></head> 之间

    
Title

我的标题一

我的标题二

运行:

在这里插入图片描述

(六)引入CSS的方式

(1)行内样式

使用style属性引入CSS样式

案例:

    
Title

Hello,css

Hello,css

运行:

在这里插入图片描述

(2)内部样式表

CSS代码写在<head><style>标签中

案例:

    
Title
Hello,world!

运行:

在这里插入图片描述

(3)外部样式表

准备工作:首先需要创建一个resources目录,在resources下创建css目录,在css目录下创建stylesheet样式表文件

1 、链接式

css文件:

/*.css文件声明选择器的样式*/div{    color: chocolate;    font-size: 100px;}
    
Title
Hello,CSS!

运行:

在这里插入图片描述

2、导入式

    
Title
Hello,CSS!

链接式与导入式的区别

  • <link/>标签属于XHTML,@import是属于CSS2.1
  • 使用<link/>链接的CSS文件先加载到网页当中,再进行编译显示
  • 使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中
  • @import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的
CSS样式优先级(就近原则)

行内样式 > 内部样式表 > 外部样式表

案例:
Style.css文件:

div{    color: yellow;    font-size: 100px;}
    
Title
Hello,CSS!

运行:

在这里插入图片描述
结论:
从结果我们可以发现根据就近原则,最后显示的颜色样式是用的行内声明的颜色样式,但是多的属性可以互相补充,例如Style.css中的font-size属性是其他两个样式没有的,但是仍能最终显示出来。

(七)CSS基础选择器

(1)标签选择器

HTML标签作为标签选择器的名称

  • <h1><h6><p><img/>等等

格式:

选择器{    属性1:属性值;//声明1    属性2:属性值;//声明2    ...}

(2)类选择器

格式:

.class{属性:属性值;}
<标签名 class="类名称">
标签内容

案例:

    
Title
你好啊

初次见面

请多多指教
好好学习,天天向上
加油

运行:

在这里插入图片描述

(3)ID选择器

格式:

#id名字{属性:属性值;...}
<标签名 class="类名称">
标签内容
    
Title

哈哈

呵呵
嘻嘻
嗯嗯

运行:

在这里插入图片描述
小结:

  • 标签选择器直接应用于HTML标签
  • 类选择器可在页面中多次使用
  • ID选择器在同一个页面中只能使用一次

基本选择器的优先级

  • ID选择器>类选择器>标签选择器
  • 基本选择器不遵循 “ 就近原则 ”

案例:

    
Title

好好学习,天天向上

运行:

在这里插入图片描述

(八)CSS高级选择器

(1)层次选择器

假设有这样一个层次结构的网页:

在这里插入图片描述

a. 后代选择器

格式:E F{声明;}

功能:获取E元素下所有与F匹配的元素
例如:body p{ background: red; }
在这里插入图片描述

b. 子选择器

格式:E>F{声明;}

功能:只获取E下面的与F匹配的第一层子元素
例如:body>p{ background: pink; }
在这里插入图片描述

c.相邻兄弟选择器

格式:E+F{声明;}

前提 : 定位到一个元素 E
功能:获取指定元素E的相邻兄弟的与F匹配的元素
注意:只找下面的兄弟,上面的不找
例如:.active+p { background: green; }
在这里插入图片描述

d.通用兄弟选择器

格式:E~F{声明;}

前提 : 定位到一个元素 E
功能:获取指定元素E后的所有匹配F的元素
例如:.active~p{ background: yellow; }
在这里插入图片描述
案例:

    
Title

1

2

3

  • 4

  • 5

    1. 5.1

    2. 5.2

    3. 5.3

  • 6

  1. 7

    8

    9

    10

    11

    12

运行:

在这里插入图片描述
通过结果我们看到body下的第一层p元素都是紫色,ul下所有p元素都是绿色,标记为a的第8行的p元素相邻兄弟(只向下)为黄色,标记为b的第10行的p元素的所有兄弟(只向下)都为红色。

(2)结构伪类选择器

  • E:first-child 作为父元素的第一个子元素的元素E
  • E:last-child 作为父元素的最后一个子元素的元素E
  • E F:nth-child(n) 选择父级元素E的第n个子元素F,(n可以是1、2、3),关键字为even、odd
  • E:first-of-type 选择父元素内具有指定类型的第一个E元素
  • E:last-of-type 选择父元素内具有指定类型的最后一个E元素
  • E F:nth-of-type(n) 选择父元素内具有指定类型的第n个F元素

例如:

ul li:first-child{ background: red;} ul li:last-child{ background: green;}p:nth-child(1){ background: yellow;} p:nth-of-type(2){ background: blue;}

在这里插入图片描述

案例:

    
Title

标题

1

2

3

  • li1
  • li2
  • li3

运行:

在这里插入图片描述

(3)属性选择器

  • E[attr] 选择匹配具有属性attr的E元素
  • E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val(其中val区分大小
    写)
  • E[attr^=val] 选择匹配元素E,且E元素定义了属性attr,并且其属性值是以val开头的任意字符串
  • E[attr$=val] 选择匹配元素E,且E元素定义了属性attr,并且其属性值是以val结尾的任意字符串
  • E[attr*=val] 选择匹配元素E,且E元素定义了属性attr,并且其属性值包含了val,换句话说,字符串val与属性值中的任意位置相匹配

案例:

    
Title

哈哈 呵呵 哼哼 嘻嘻 啦啦 嗯嗯

运行:

在这里插入图片描述

二、CSS美化网页元素

(一)span和div标签

  • span标签的作用
    • 能让某几个文字或者某个词语凸显出来
    • 行内元素
  • div标签
    • 块级元素

案例:

    
span标签

一寸 光阴一寸

寸金
难买寸光阴

运行:

在这里插入图片描述

(二)字体样式

属性名 含义 举例
font-family 设置字体类型 font-family:“隶书”;
font-size 设置字体大小 font-size:12px;
font-style 设置字体风格 font-style:italic;
font-weight 设置字体的粗细 font-weight:bold;
font 在一个声明中设置所有字体属性 font:italic bold 36px “宋体”;

(三)文本样式

属性 含义 举例
color 设置文本颜色 color:#00C;
text-align 设置元素水平对齐方式 text-align:right;
text-indent 设置首行文本的缩进 text-indent:20px;
line-height 设置文本的行高 line-height:25px;
text-decoration 设置文本的装饰 text-decoration:underline;
vertical-align 设置文本对齐 vertical-align : middle

(四)文本阴影

在这里插入图片描述

案例:
Style1.css:

#a{    font-family: 楷体;}#b{    font-style: italic;}/* text-indent文本首行缩进 */.sj{    text-indent: 2em;}/* text-shadow文本阴影 */h1{    text-shadow: green -1px 1px 10px;}
    
Title

CSS(层叠样式表)

摘自: 百度百科

概念:层叠样式表(英文全称:Cascading Style Sheets)

是一种用来表现HTML(标准通用标记语言的一个应用)
或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地
对网页各元素进行格式化

运行:

在这里插入图片描述

(五)超链接伪类

伪类名称 含义 示例
a:link 未单击访问时超链接样式 a:link{color:#9ef5f9;}
a:visited 单击访问后超链接样式 a:visited {color:#333;}
a:hover 鼠标悬浮其上的超链接样式 a:hover{color:#ff7300;}
a:active 鼠标单击未释放的超链接样式 a:active {color:#999;}

设置伪类的顺序:a:link->a:visited->a:hover->a:active

案例:

    
Title 点击进入...

运行:

在这里插入图片描述
鼠标悬停:
在这里插入图片描述

(六)列表样式

  • list-style-type
  • list-style-image
  • list-style-position
  • list-style

案例:

    
Title
  • 可乐
  • 雪碧
  • 康师傅
  • 芬达
  • 百岁山

运行:

在这里插入图片描述

(七)网页背景

  • 背景颜色
    • background-color
  • 背景图片
    • background-image
  • 背景定位
    • background-position属性
  • 背景重复方式
    • background-repeat
  • 简写
    • background
      例如:
background:#C00 url(../image/kuangshen.jpg) 205px 10px no-repeat;
  • 背景尺寸 : background-size

    • auto 默认值,使用背景图片保持原样
    • percentage 当使用百分值时,不是相对于背景的尺寸大小来计算的,而是相对于元素宽度来计算的
    • cover 整个背景图片放大填充了整个元素
    • contain 让背景图片保持本身的宽高比例,将背景图片缩放到宽度或者高度正好适应所定义背景的区域

(八)CSS渲染渐变

  • 线性渐变
    • 颜色沿着一条直线过渡 : 从左到右、从右到左、从上到下等
  • 径向渐变
    • 圆形或椭圆形渐变 , 颜色不再沿着一条直线变化, 而是从一个起点朝所有方向混合
  • 浏览器兼容性
属 性 名 IE Firefox Chrome Opera Safari
Gradient 10+ 19.0+ 26.0+ 12.1+ 5.1+
  • IE浏览器是Trident内核,加前缀:-ms-
  • Chrome浏览器是Webkit内核,加前缀:-webkit-
  • Safari浏览器是Webkit内核,加前缀:-webkit-
  • Opera浏览器是Blink内核,加前缀:-o-
  • Firefox浏览器是Mozilla内核,加前缀:-moz-

语法:

在这里插入图片描述
兼容Webkit内核的浏览器

-webkit-linear-gradient ( position, color1, color2,…)
    
Title

在这里插入图片描述

三、盒子模型

(一)什么是盒子模型

CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model):

在这里插入图片描述

不同部分的说明:

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。

(二)边框

(1)边框颜色

属性 说明 示例
border-top-color 上边框颜色 border-top-color:#369;
border-right-color 右边框颜色 border-right-color:#369;
border-bottom-color 下边框颜色 border-bottom-color:#fae45b;
border-left-color 左边框颜色 border-left-color:#efcd56;
border-color 四个边框为同一颜色 border-color:#eeff34;
boder-color 上、下边框颜色:#369 左、右边框颜色:#000 border-color:#369 #000;
border-color 上边框颜色:#369左、右边框颜色:#000下边框颜色:#f00 border-color:#369 #000 #f00;
border-color 上、右、下、左边框颜色:#369、#000、#f00、#00f border-color:#369 #000 #f00 #00f;

(2)边框粗细

border-width:边框粗细

  • thin
  • medium
  • thick
  • 像素值

(3)边框样式

border-style:边框样式

  • none:默认无边框
  • dotted:定义一个点线边框
  • dashed:定义一个虚线边框
  • solid:定义实线边框
  • double:定义两个边框。 两个边框的宽度和 border-width 的值相同
  • groove:定义3D沟槽边框。效果取决于边框的颜色值
  • ridge:定义3D脊边框。效果取决于边框的颜色值
  • inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
  • outset:定义一个3D突出边框。 效果取决于边框的颜色值

边框简写

  • 同时设置边框的颜色 , 粗细和样式
    border:1px solid #3a6587;
    border: 1px dashed red;
    等等

(4)外边距

  • margin
    • margin-top设置顶端外边距
    • margin-right设置右端外边距
    • margin-bottom设置底部外边距
    • margin-left设置左端外边距
    • margin

外边距妙用

  • 网页居中对齐

    margin:0px auto;

  • 网页居中对齐的必要元素

    • 块元素
    • 固定宽度

(5)内边距

padding

  • padding-left
  • padding-right
  • padding-top
  • padding-bottom
  • padding

(6)圆角边框

border-radius: 20px 10px 50px 30px;(四个属性值按顺时针排列)

在这里插入图片描述
border-radius:20px;(四个角属性值都为20px)

(7)盒子阴影

在这里插入图片描述

(8)盒子总结演示

    
Title

边框演示

这是实线红色边框

这是实线绿色边框

细边框

中等宽度边框

粗边框

无边框

点线边框

虚线边框

实线边框

双边框

沟槽边框

脊边框

嵌入边框

突出边框

圆角边框演示

盒子模型演示

这是内间距为30px,外间距为25px和35px的绿蓝色边框的盒子。

盒子阴影演示

在这里插入图片描述

在这里插入图片描述

四、浮动

(一)标准文档流

标准文档流的组成

  • 块级元素(block)
    • h1~h6 、p 、 div 、列表
  • 内联元素(inline)
    • span 、 a 、 img 、 strong

内联标签可以包含于块级标签中,成为它的子元素,而反过来则不成立

(二)display属性

说明
block 块级元素的默认值,元素会被显示为块级元素,该元素前后会带有换行符
inline 内联元素的默认值。元素会被显示为内联元素,该元素前后没有换行符
inline-block 行内块元素,元素既具有内联元素的特性,也具有块元素的特性
none 设置元素不会被显示
  • 块级元素与行级元素的转变(block、inline)

  • 控制块元素排到一行 (inline-block)

  • 控制元素的显示和隐藏(none)

(三)块元素排在一行的方法

  • 可以使用什么属性使块元素排在一行?

    • inline-block 属性
    • float属性

(四)浮动(float)

float属性

属性值 说明
left 元素向左浮动
right 元素向右浮动
none 默认值。元素不浮动,并会显示在其文本中出现的位置
    
Title

哈哈哈哈哈哈哈啊哈

在这里插入图片描述

(五)边框塌陷

  • 浮动元素脱离标准文档流
  • 清除浮动
    在这里插入图片描述
  • clear属性
说明
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左、右两侧不允许浮动元素
none 默认值。允许浮动元素出现在两侧

(六)溢出处理

Overflow属性

属性值 说明
visible 默认值。内容不会被修剪,会呈现在盒子之外
hidden 内容会被修剪,并且其余内容是不可见的
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余内容
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容

案例:

    
Title

overflow 属性

hidden:

1990年,Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年,Web真正走出实验室。 从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。

scroll:

1990年,Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年,Web真正走出实验室。 从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。

auto:

1990年,Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年,Web真正走出实验室。 从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。

visible (默认):

1990年,Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年,Web真正走出实验室。 从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。

运行:

在这里插入图片描述
在这里插入图片描述

(七)解决父级边框塌陷的方法

  • 浮动元素后面加空div
    • 简单,空div会造成HTML代码冗余
  • 设置父元素的高度
    • 简单,元素固定高会降低扩展性
  • 父级添加overflow属性
    • 简单,下拉列表框的场景不能用
  • 父级添加伪类after
    • 写法比上面稍微复杂一点,但是没有副作用,推荐使用

(八)inline-block和float的区别

  • display:inline-block
    • 可以让元素排在一行,并且支持宽度和高度,代码实现起来方便
    • 位置方向不可控制,会解析空格
    • IE 6、IE 7上不支持
  • float
    • 可以让元素排在一行并且支持宽度和高度,可以决定排列方向
    • float 浮动以后元素脱离文档流,会对周围元素产生影响,必须在它的父 级上添加清除浮动的样式

五、定位网页元素

(一)定位

position属性

  • static : 默认值,没有定位
  • relative:相对定位
  • absolute:绝对定位
  • fixed:固定定位

(二)相对定位

  • 相对定位的特性

    • 相对于自己的初始位置来定位
    • 元素位置发生偏移后,它原来的位置会被保留下来
    • 层级提高,可以把标准文档流中的元素及浮动元素盖在下边
  • 相对定位的使用场景

    • 相对定位一般情况下很少自己单独使用,都是配合绝对定位使用,为绝对定位创造定位父级而又不设置偏移量
    
Title

正常位置

向左移动

向右移动

在这里插入图片描述

(三)绝对定位

  • 绝对定位的特性
    • 绝对定位是相对于它的定位父级的位置来定位,如果没有设置定位父级, 则相对浏览器窗口来定位
    • 元素位置发生偏移后,原来的位置不会被保留
    • 层级提高,可以把标准文档流中的元素及浮动元素盖在下边
    • 设置绝对定位的元素脱离文档流
  • 绝对定位的使用场景
    • 一般情况下,绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别 花边等场景

案例:

    
Title

我的标题

用绝对定位,一个元素可以放在页面上的任何位置。 这个标题距离左边的页面100px和距离页面的顶部150px。

运行:

在这里插入图片描述

(四)固定定位

  • 固定定位的特性
    • 相对浏览器窗口来定位
    • 偏移量不会随滚动条的移动而移动
  • 固定定位的使用场景
    • 一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶 导航栏等
    
Title

哈哈哈

哈哈哈

哈哈哈

哈哈哈

哈哈哈

哈哈哈

哈哈哈

哈哈哈

哈哈哈

哈哈哈

哈哈哈

在这里插入图片描述

(五)z-index属性

用于调整元素定位时重叠层的上下位置

  • z-index属性值:整数,默认值为0
  • 设置了positon属性时,z-index属性可以设置各元素之间的重叠高低关系
  • z-index值大的层位于其值小的层上方

(六)网页元素透明度

属性 说明 举例
opacity:x x值为0~1,值越小越透明 opacity:0.4;
filter:alpha(opacity=x) x值为0~100,值越小越透明 filter:alpha(opacity=40);

转载地址:http://akwm.baihongyu.com/

你可能感兴趣的文章