前端——css基础

最新推荐文章于 2024-07-21 19:13:42 发布

布谷～dwb

最新推荐文章于 2024-07-21 19:13:42 发布

阅读量5.8k

点赞数

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/qq_44331253/article/details/123286234

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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标签结合

通过标签的style属性来结合

<!--通过style属性-->
<p style="属性名称:属性值;..."></p>

通过style标签来结合

<head>
<style type="text/css">
      标签名称{
          属性名称: 属性对应的值;
         
      }
</style>
</head>

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

通过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-color	1. 颜色常量，如：red 2. 使用十六进制，如：#ABC 3. 红绿蓝使用 rgb(红,绿,蓝)
背景图片	background-image	url(图片的路径)
平铺方式	background-repeat	repeat 默认。背景图像将在垂直方向和水平方向重复 repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像将在垂直方向重复。
背景位置	background-position	left 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-decoration	underline 下划线 overline 上划线 ine-through 删除线 none 不要线条
文本缩进	text-indent	用于缩进文本，可以使用em单位。
文本对齐	text-align left	把文本排列到左边。 right 把文本排列到右边。 center 把文本排列到中间。默认值：由浏览器决定。

字体属性

介绍

功能	属性名	作用
字体名	font-family	设置字体，本机必须要有这种字体
设置大小	font-size	像素
设置样式	font-style	italic 斜体normal 默认值。浏览器显示一个标准的字体样式。
设置粗细	font-weight	bolder加粗

<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（完全不透明）

布谷～dwb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端——css基础

目录div和spanCSSCSS的作用为什么要学习CSSCSS引入方式三种引入方式三种结合方式优先级选择器基本选择器语法优先级组合选择器伪类选择器CSS常用属性背景属性文本样式字体属性display样式透明效果div和spandiv 就是一个标签. 是一个容器, 块级元素, div内部可以放任何标签(body,html等不行)span就是一个标签. 是一个文本容器, 行内元素, span标签中只能嵌套文本/图片/超链接CSS层叠样式表层叠: 样式层层叠加 eg:刷墙样式表: 样式的集合
复制链接

扫一扫

专栏目录