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

相关推荐
码事漫谈7 分钟前
解决 Anki 启动器下载错误的完整指南
前端
im_AMBER27 分钟前
Web 开发 27
前端·javascript·笔记·后端·学习·web
蓝胖子的多啦A梦1 小时前
低版本Chrome导致弹框无法滚动的解决方案
前端·css·html·chrome浏览器·版本不同造成问题·弹框页面无法滚动
玩代码1 小时前
vue项目安装chromedriver超时解决办法
前端·javascript·vue.js
訾博ZiBo1 小时前
React 状态管理中的循环更新陷阱与解决方案
前端
StarPrayers.1 小时前
旅行商问题(TSP)(2)(heuristics.py)(TSP 的两种贪心启发式算法实现)
前端·人工智能·python·算法·pycharm·启发式算法
一壶浊酒..2 小时前
ajax局部更新
前端·ajax·okhttp
DoraBigHead3 小时前
React 架构重生记:从递归地狱到时间切片
前端·javascript·react.js
彩旗工作室3 小时前
WordPress 本地开发环境完全指南:从零开始理解 Local by Flywhee
前端·wordpress·网站
iuuia3 小时前
02--CSS基础
前端·css