前端学习----css基础语法

CSS概述

++CAscading Style Sheets(级联样式表)++

CSS是一种样式语言,用于对HTML文档控制外观,自定义布局等,例如字体,颜色,边距等

可将页面的内容与表现形式分离,页面内容存放在HTML文档中,而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分

HTML与CSS的关系

HTML是网页端内容

CSS定义页面的样式

CSS基本语法

样式修饰表

行内样式表

通过标签的style属性来设置元素的样式

html 复制代码
<!--直接在行内定义样式-->
<p style="color: pink ;font-size: 10px;font-weight: bold;">窗前明月光</p>

内嵌样式表

html 复制代码
<!--修饰所有<p></p>-->
<style type = "text/css">
  p{
    font-size: 16px;
				color: pink;
  }
</style>

在CSS文件中设置样式

可以创建一个.css文件用于保存样式

只需要在html文件中导入即可使用

html 复制代码
<link href="css/index.css" rel="stylesheet"/>

CSS选择器

标签选择器

css 复制代码
p{
		    font-size: 16px;
						color: pink;
		  }

ID选择器

css 复制代码
#title{
  font-size: 16px;
						color: pink;
}

类选择器

css 复制代码
<p class = "p1"></p>
<p class = "p2"></p>
.p1{
  color:"green";
}
.p2{
  color:"red";
}

通配选择器

可以选中匹配所有标签

css 复制代码
*{
  font-family:楷体;
}

选择器组合

可以为多个选择器定义相同的样式表

css 复制代码
#title,.p1,.p2{
  font-family:楷体;
}

选择器修饰优先级

若两个样式表对同一个内容修饰,优先使用ID选择器,其次类选择器,最后标签选择器

CSS修饰文本

html 复制代码
● 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用来设置首行缩进

CSS修饰背景

● background-color背景颜色
● background-image背景图片
● background-repeat背景重复
● background-size背景尺寸
● background- position 背景位置

CSS修饰列表

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

● list-style-image 将图象设置为列表项标志。
● list-style-position 设置列表中列表项标志的位置。
● list-style-type 设置列表项标志的类型。
● list-style 简写属性。

CSS伪类

CSS伪类专门用来表示标签的一种特殊的状态,当我们需要为处在这些特殊状态的标签设置样式时,就可以使用伪类

:hover伪类表示鼠标移入的状态
:active表示的是被点击的状态
:focus向拥有键盘输入焦点的标签添加样式。
css 复制代码
/*当鼠标放在标签上*/
a:hover{
  color:blue;
  background-color:aqua;

}
/*当鼠标点击标签时*/
a:active{
  color:yellow;
}
/*向拥有鼠标焦点的标签进行修饰*/
.txt1:focus{
  background-color:aqua;
}

透明

定义透明效果的属性是opacity

opacity 属性设置标签的不透明级别  值为1。
规定不透明度:从 0.0 (完全透明)到 1.0(完全不透明)。

块级,行级,行级块标签

块级标签

无论内容多少,都会独占一行

可以设置宽高,通过width和height

例如

*


行级标签

只占自身大小的标签,不会占一行

例如

行级块标签

不占一行,可以设置宽高

例如

Display

block :设置标签为块标签
inline :设置标签为行级标签
inline-block :设置标签为行级块标签
none :隐藏标签(标签将在页面中完全消失)

div和span

div和span都是纯净的标签,用于方便对其进行修饰

div

div是块级标签,没有任何附加样式,可以放置任何标

html 复制代码
<div>
  div是一个纯净版的块级标签 
</div>

span

span是行级标签,是一个纯净版的行级标签

相关推荐
-一杯为品-12 分钟前
【51单片机】程序实验5&6.独立按键-矩阵按键
c语言·笔记·学习·51单片机·硬件工程
Json_1817901448040 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome