前端——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 标签被用来选中文档中的文字。

相关推荐
伐尘16 小时前
【CE】图形化CE游戏教程通关手册
前端·chrome·游戏·逆向
不想吃饭e17 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
非凡ghost17 小时前
AOMEI Partition Assistant磁盘分区工具:磁盘管理的得力助手
linux·运维·前端·数据库·学习·生活·软件需求
UrbanJazzerati17 小时前
前端入门:margin居中、border、box-radius、transform、box-shadow、mouse事件、preventDefault()
前端·面试
蝎子莱莱爱打怪17 小时前
🚀🚀🚀嗨,一起来开发 开源IM系统呀!
前端·后端·github
Enddme17 小时前
《前端笔试必备:JavaScript ACM输入输出模板》
前端·javascript·面试
前端鱼17 小时前
前端面试中值得关注的js题
前端·面试
UnnamedOrange17 小时前
有来前后端部署
前端·后端
德育处主任17 小时前
p5.js 绘制 3D 椭球体 ellipsoid
前端·javascript·数据可视化
未来之窗软件服务17 小时前
未来之窗昭和仙君 (四) 前端网页分页 — 东方仙盟筑基期
前端·仙盟创梦ide·东方仙盟·东方仙盟修仙·昭和仙君