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

相关推荐
牧天白衣.2 小时前
html中margin的用法
前端·html
NoneCoder2 小时前
HTML与安全性:XSS、防御与最佳实践
前端·html·xss
沃野_juededa2 小时前
关于uniapp 中uview input组件设置为readonly 或者disabled input区域不可点击问题
java·前端·uni-app
哎哟喂_!2 小时前
UniApp 实现分享功能
前端·javascript·vue.js·uni-app
k1955142392 小时前
uniapp常用
前端·javascript·uni-app
wuhen_n4 小时前
CSS元素动画篇:基于页面位置的变换动画
前端·css·html·css3·html5
Nueuis5 小时前
微信小程序分页和下拉刷新
服务器·前端·微信小程序
小白64025 小时前
前端性能优化(实践篇)
前端·性能优化
小彭努力中5 小时前
9.Three.js中 ArrayCamera 多视角相机详解+示例代码
开发语言·前端·javascript·vue.js·数码相机·ecmascript·webgl