div和span

  • div 就是一个标签. 是一个容器, 块级元素, div内部可以放任何标签(body,html等不行)
  • span就是一个标签. 是一个文本容器, 行内元素, span标签中只能嵌套文本/图片/超链接

CSS

  • 层叠样式表
    层叠: 样式层层叠加 eg:刷墙
    样式表: 样式的集合

学习html就是学习标签, 学习CSS主要学习样式(属性),选择器

CSS的作用

  • 美化页面,修饰页面
  • HTML负责内容(hello),CSS负责样式(颜色,字体大小…)
<font color="red" size="7">hello</font>
  • html当做毛坯房, CSS当做装修

为什么要学习CSS

  • 通过标签来修改样式的缺点:
    1. 需要记忆哪些标签有哪些属性, 如果该标签没有这个属性, 那么设置了也没有效果
    2. 当需求变更时我们需要修改大量的代码才能满足现有的需求
  • 通过CSS来修改样式的好处:
    1. 不用记忆哪些属性属于哪个标签
    2. 当需求变更时我们不需要修改大量的代码就可以满足需求
CSS语法
{
	属性:属性值 属性值;
	属性:属性值 属性值
}
  • 属性和属性值用 : 连接
  • 如果有多个属性值用空格隔开
  • 如果有多个属性,属性和属性之间用;隔开 最后一个;可以不写

CSS引入方式

  • HTML是一种语言;CSS也是一种语言。如果想要CSS能够修饰HTML的样式,就必须把CSS引入到HTML中。即:要解决 把CSS代码写在什么地方 的问题

三种引入方式

  • 引入的方式有:
    内联样式:把CSS代码内嵌到HTML代码里,通过标签的style属性来结合
    内部样式:把CSS代码写在HTML文档内部,通过style标签来结合
    外部样式:把CSS代码写在独立的CSS文件里,通过link标签结合
  1. 通过标签的style属性来结合
<!--通过style属性-->
<p style="属性名称:属性值;..."></p>
  1. 通过style标签来结合
<head>
<style type="text/css">
      标签名称{
          属性名称: 属性对应的值;
         
      }
</style>
</head>

注意点:
1.style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系)
2.style标签中的type属性其实可以不用写, 默认就是type=“text/css”
3.设置样式时必须按照固定的格式来设置. key: value; 其中 : 不能省略, 分号大多数情况下也不能省略

  1. 通过link标签结合
    创建一个css文件(后缀是css)
    通过link标签引入
<head>
    <link rel="stylesheet" href="../../css/myCss.css" />
</head>

​link标签属性:

  • href : css文件路径

  • rel各个属性值配置的意思:
    Alternate – 定义交替出现的链接
    Stylesheet – 定义一个外部加载的样式表
    Start – 通知搜索引擎,文档的开始
    Next – 记录文档的下一页.(浏览器可以提前加载此页)
    Prev – 记录文档的上一页.(定义浏览器的后退键)
    Contents
    Index – 当前文档的索引
    Glossary – 词汇
    Copyright – 当前文档的版权
    Chapter – 当前文档的章节
    Section – 作为文档的一部分
    Subsection – 作为文档的一小部分
    Appendix – 定义文档的附加信息
    Help – 链接帮助信息
    Bookmark – 书签

所以说,我们用这样的方式,引入外部的css文件时,一定不能忘记rel属性的配置。

三种结合方式优先级

  • 就近原则(相对于代码,也就是要修饰的标签)

选择器

基本选择器语法

选择器描述语法示例
标签选择器根据HTML标签名称选择标签标签名称{}div{ color:red; }
ID选择器根据id属性值选择标签#id值{}#d1 { color:blue; }
类选择器根据class属性值(类名)选择标签.类名{}.c1 { color:yellow; }
通用选择器选取所有标签*{}*{ color: pink;}

优先级

选择器优先级

  • ID选择器 > 类选择器 > 标签选择器 > 通用选择器
  • 如果优先级相同,那么就满足就近原则

组合选择器

  • 多个基本选择器的组合,可以更灵活的选取标签
选择器描述语法示例
层级选择器根据HTML标签名称选择标签祖先 后代div a{ }
属性选择器根据指定属性的值筛选元素[属性=‘值’]input[type=‘text’] { }
并集选择器多个选择器的结果进行合并选择器1,选择器2,….c1, span { }

伪类选择器

  • 了解几个超链接相关的伪类选择器
选择器描述示例
:link选择正常状态的超链接a:link{}
:visited选择被访问过的超链接a:visited{}
:hover选择鼠标悬停的超链接a:hover{}
:active选择鼠标按下的超链接a:active{}

案例:鼠标悬停,div里面的字体变色

	<head>
		<meta charset="utf-8">
		<title>鼠标悬停,div里面的字体变色</title>
		<style>
			.a_div{
				width:200px;
			}
			.a_div:hover{
				background-color: #FF4C4C;
			}
			
			.a_div:hover ,.a_btn{
				color:#ffffff;
			}
		</style>
	</head>
	<body>
		<div class="a_div">
			<a href="#" class="a_btn">看我变色</a>
		</div>
	</body>

鼠标悬停前
鼠标悬停前
鼠标悬停后
鼠标悬停后

CSS常用属性

背景属性

介绍

功能属性名属性取值
背景色background-color1. 颜色常量,如:red 2. 使用十六进制,如:#ABC 3. 红绿蓝 使用 rgb(红,绿,蓝)
背景图片background-imageurl(图片的路径)
平铺方式background-repeatrepeat 默认。背景图像将在垂直方向和水平方向重复 repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像 将在垂直方向重复。
背景位置background-positionleft top
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS常用属性-背景</title>
    <style>
        /*设置整个页面的背景样式*/
        body{
            /*背景图片*/
            background-image: url("img/little_mm.jpg");
            /*平铺方式*/
            background-repeat: repeat;
        }
    </style>
</head>
<body>

    <div>页面内容</div>

</body>
</html>

文本样式

介绍

功能属性名属性取值
颜色color颜色
设置行高line-height像素
文字修饰text-decorationunderline 下划线 overline 上划线 ine-through 删除线 none 不要线条
文本缩进text-indent用于缩进文本,可以使用em单位。
文本对齐text-align left把文本排列到左边。 right 把文本排列到右边。 center 把文本排列到中间。默认值:由浏览器决定。

字体属性

介绍

功能属性名作用
字体名font-family设置字体,本机必须要有这种字体
设置大小font-size像素
设置样式font-styleitalic 斜体normal 默认值。浏览器显示一个标准的字体样式。
设置粗细font-weightbolder加粗
<style>
        span{
            /*字体:幼圆*/
            font-family: 幼圆;
            /*大小:40px*/
            font-size: 40px;
            /*字体:斜体*/
            font-style: italic;
            /*加粗显示*/
            font-weight: bolder;
        }
    </style>

CSS列表
list-style-image

display样式

display:block;
    inline
    inline_block
    none

block 设置为块标签
inline 设置为行标签
inline-block 设置为行级块标签
none 隐藏标签

.title{
	display: inline-block;
	border-bottom: 3px solid #FF4C4C;
}

透明效果

opacity(定义透明度)

opacity:0;

规定不透明度:从0.0(完全透明)到1.0(完全不透明)

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐