前端——CSS1

一,概述

CSS(Cascading Style Sheets)(级联样式表)

css是一种样式表语言,为html标签修饰定义外观,分工不同

涉及:对网页的文字、背景、宽、高、布局进行修饰

分为内嵌样式表(平常练习时使用)和外部样式表(制定网页时使用,将css与html网页分离)

CSS与HTML的关系:

HTML是网页内容

CSS定义页面的样式

二,基本语法------行内样式表

1.样式表:

(1)行内样式表

行内样式表:是通过标签的 style 属性来设置元素的样式,其基本语法格式如下:

< 标签名 style=" 属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3;"> 内容 </ 标签名 >

(2)内嵌样式表

内嵌式样式表是将 CSS 代码集中写在 HTML 文档的 head 头部标签中,并且用 style 标签定义

<html>

<head>

<title> 样式规则 </title>

将内嵌样式表放在此处

<style></style>

</head>

<body>

</body>

</html>

(3)外部样式表

外部样式表是将所有的样式放在一个或多个以 .CSS 为扩展名的外部样式表文件中,通

过 link 标签将外部样式表文件链接到 HTML 文档中

使用link(链接)标签 :

<head>

<link href="引入样式的文件" rel="stylesheet " type=" text /css">

<style type=" text /css">

</style>

2.选择器:

(1)标签选择器:

通过标签选择器可以选择页面中的所有指定标签

语法:标签名 {}

(2)类选择器:

通过标签的 class 属性值选中一组标签

语法: .class 属性值 {}

(3)id 选择器:

通过标签的 id 属性值选中唯一的一个标签

语法: #id 属性值 {}

(4)通配选择器 :

可以用来选中页面中的所有的标签

语法: *{}

3.文本修饰:

color :字体颜色

font-size :字体大小

font-family :字体

text-align :文本对齐

text-decoration:line-through :定义穿过文本下的一条线

text-decoration:underline :定义文本下的一条线

text-decoration:none :定义标准的文本

font-style: italic; 斜体文本

font-weight: 字体粗细

line-height: 设置行高

4.背景修饰:

background-color:背景颜色

background-image 背景图片

background-repeat 背景重复

background-size 背景尺寸

background- position 背景位置

5.CSS的列表属性

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

list-style-image :将图象设置为列表项标志。

list-style-position : 设置列表中列表项标志的位置。

list-style-type : 设置列表项标志的类型。

list-style: 简写属性。

6.CSS伪类

CSS伪类专门用来表示标签的一种的特殊的状态,当我们需要为处在这些特殊状

态的标签设置样式时,就可以使用伪类 。

(1)伪类的语法 :

:hover伪类表示鼠标移入的状态

:active表示的是被点击的状态

:focus向拥有键盘输入焦点的标签添加样式。

(2)透明度

定义透明效果的属性是 opacity 。

opacity 属性设置标签的不透明级别 值为 1 。

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

7.块级,行级,行级块标签

(1)块级标签

无论内容多少 都会独自占据一行的,可以进行修饰。

例如<p>、<h1>、<ul>、<ol>、<hr/>等。

(2)行级标签

只占自身大小的标签,不会占一行,但是不能进行修饰。

例如<font>、<b>、<i>、<a>等。

(3)行块级标签

不会独自占一行,但是可以进行修饰。

例如 <input/> <img>等

8.Display

通过 display 样式可以修改标签的类型。

block :设置标签为块标签

inline :设置标签为行级标签

inline-block :设置标签为行级块标签

9.div和span

(1)div 标签

div 是块级标签,可以放置任何标签。

div 没有任何附加功能,给了什么属性就能变成什么样。

div 主要的作用是被用来布局网页。

(2)span 标签

span 是行级标签

span 没有任何附加功能,给了什么属性就能变成什么样。

span 标签被用来选中文档中的文字。

相关推荐
BillKu5 小时前
Vue3 + Element Plus 中修改表格当前选中行的颜色
前端·vue.js·elementui
BillKu6 小时前
Axios中POST、PUT、PATCH用法区别
前端·vue.js
好奇的菜鸟7 小时前
掌握 npm 核心操作:从安装到管理依赖的完整指南
前端·npm·node.js
肥肠可耐的西西公主8 小时前
前端(小程序)学习笔记(CLASS 2):WXML模板语法与WXSS模板样式
前端·学习·小程序
逆袭的菜鸟X9 小时前
RxJS 高阶映射操作符详解:map、mergeMap 和 switchMap
前端
bubiyoushang8889 小时前
HTML5的新语义化标签
前端·html·html5
会飞的鱼先生10 小时前
vue3自定义指令来实现 v-copy 功能
前端·javascript·vue.js
陈天伟教授10 小时前
Web前端开发 - 制作简单的焦点图效果
java·开发语言·前端·前端开发·visual studio
_殊途10 小时前
前端三件套之html详解
前端·html
不思念一个荒废的名字11 小时前
【黑马JavaWeb+AI知识梳理】后端Web基础03 - MySQL概述
前端·数据库·mysql