CSS基本操作详解及截图演示
Web前端基础修炼
HTML基本标签详解与运行截图
CSS基本操作详解及截图演示
JavaScript基础(ECMAScript)
JavaScript中DOM操作
JavaScript中BOM操作
目录
创建CSS
创建边框和背景
CSS选择器
字体属性
创建文本样式
内部样式表
行内样式表
外部样式表
创建文本过度
使用变换
盒子模型
创建CSS
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>创建CSS</title><!--文档内嵌样式表,其中还有一个是外部样式表，那个是在外面新建一个CSS文档把a的内容放里面就行了，它适用于所有的html文件--><!--其中元素内嵌样式表的优先级高于文档内嵌样式表高于外部样式表--><style type="text/css">a{font-size: 30px;color: #9e61ff;}</style>
</head>
<body>
<a>hello world</a>
<br>
<!--使用元素内嵌样式表，属性可以设置字体大小和颜色,其中颜色是RGB三原色构成-->
<a style="font-size: 40px;color: #ff7e44">hello world</a>
</body>
</html>运行结果：
创建边框和背景
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>创建边框和背景</title><style>.c{border-width: 5px;border-color: #9d59ff;border-top-color: #b1ff42;border-style: solid;border-bottom-style: dashed;}.s{width: 677px;height: 677px;border: 5px solid red;border-top: 10px dashed yellow;background: #9d59ff;background-image: url("网络头像.JPG");}</style>
</head>
<body>
<p class="c">hello world</p>
<p class="s">hello css</p>
</body>
</html>运行结果：
CSS选择器
标签选择器
标签选择器，顾名思义，就是确定是哪个标签的，p标签了，div标签了等等等吧，其特点就是如果你选择了p标签，那么所有的p标签的样式都会服从你的定义，同理div等其他标签也是这样，来看个例子吧
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>标签选择器</title><style>p {color: #ff00ff;}div {color: blue;}</style>
</head>
<body>
<p>男生</p>
<p>男生</p>
<p>男生</p>
<div>女生</div>
<div>女生</div>
<div>女生</div>
</body>
</html>在这里给p标签设置了颜色，给div标签设置了另一种颜色，你会发现，所有的p标签和div标签都改变了颜色，结果如下
类选择器
从上面的标签选择器可以看出，每次设置样式的时候，如果是p标签，那么会把所有的p标签的样式都改变了，很多时候我们只是希望改某些标签的样式，所以就有了类选择器，也就是我们自定义一个类选择器，哪个标签使用，那么在该标签后用class属性调用就可以了，还有一个class属性可以调用多个类选择器，注意类选择器名字前有一个"."，看看下面的例子吧。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>类选择器</title><style>.red {color: red;}.font35 {font-size: 35px;}</style>
</head>
<body><ul><li class="red">生僻字</li><li class="red font35">芒种</li><li>过客</li></ul>
</body>
</html>上面自定义了一个颜色和一个字号，通过不同的li标签去调用，展示出不同的样式，运行如下
id选择器
这个id选择器跟上面的类选择器很相似，在定义的时候是在名字前加"#"，在调用的时候是用id属性，其特点是，你自定义的样式只能被调用一次，具体看下面的例子吧。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>id选择器</title><style>#red {color: red;}</style>
</head>
<body>
<!--id选择器只能被调用一次-->
<div id="red">hello world</div><!--由于上面已经调用，所以下面这个会报错-->
<!--<p id="red">hello</p>-->
</body>
</html>上面那个报错的我已经注释了，你要是想演示，可以在即放开试试，上面的运行结果如下
通配符选择器
通配符选择器就比较厉害了，如果你是以*来定义了一个选择器，那么就是所有的样式都会跟你自定义的一样了，来看效果吧。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>通配符选择器</title><style>* {color: green;font-size: 20px;}</style>
</head>
<body>
<h1>啦啦啦啦</h1>
<div>hello</div>
<p>world</p>
</body>
</html>运行结果如下：
字体属性
字体属性，也就是设置字体倾斜了，加粗了，大小了还有字形，例如微软雅黑或者宋体等，看看效果吧。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>字体属性</title><style>body {font-family: 微软雅黑;font-size: 25px;}.bold {/*font-weight: bold;*/font-weight: 700;}div {/*复合属性，这里四个属性必须按顺序写，其中后两个是必不可少的*//*font: font-style font-weight font-size/line-height font-family;*//*分别是倾斜，加粗，16px大小和微软雅黑字体*/font: italic 700 16px 微软雅黑;}p {font-style: italic;}em {font-style: normal;}</style>
</head>
<body>
<div class="bold">hello world</div>
<p>上课时候的你</p>
<em>下课时候的你</em>
<div>hello</div>
</body>
</html>运行结果如下：
创建文本样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>创建文本样式</title><style type="text/css">.class1{text-align: center;/*这是居中*/direction: ltr;/*从左到右排列*/word-spacing: 50px;/*单词间间距*/letter-spacing: 10px;/*字母间间距*/}.class2{line-height: 200px;/*设置行高，也是行与行之间的间距*/text-indent: 50px;/*设置首行缩进*/text-decoration: underline;/*设置下划线，其中overline是设置上划线line-through是设置删除线*/text-transform: capitalize;/*设置首字母大写，其中uppercase是全部大写，lowercase是全部小写*/}</style>
</head>
<body>
<p class="class1">hello world</p>
<p class="class2">hello worldhello worldhello worldhello worldhello worldhello worldhello world</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>创建文本样式</title><style type="text/css">.class1{font-family: 微软雅黑;/*设置字体名称*/font-size: 40px;/*设置字体大小*/font-style: italic;/*设置字体样式*/}.class2{font-variant: small-caps;/*全部小写变大写*/font-weight: 900;/*设置加粗，可以自定义，也可以用bolder等*/text-shadow: 1px 8px 2px;/*设置水平偏移竖直偏移和模糊程度*/}</style>
</head>
<body>
<p>hello world</p>
<p class="class1">hello world</p>
<p class="class2">hello world</p>
</body>
</html>运行结果：
内部样式表
说起来内部样式表，不难想起选择器，只不过这里分定义的位置，首先看看什么样是内部样式表吧
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内部样式表</title><!--练习的时候常用--><!--内部样式表就是把样式定义在了html内--><style>div {color: green;}</style>
</head>
<body>
<div>hello world</div>
</body>
</html>运行结果：
内部样式表就是定义在html内的，也就是我们上面演示选择器的时候用的
行内样式表
学过内部样式表，行内样式表，是不是能猜出个一二了，行内样式表就是定义在行内的，难以想象吧，看看例子吧
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>行内样式表</title>
</head>
<body>
<p style="color: green; font-size: 20px">要想生活过得去，身上必须带点绿</p>
</body>
</html>运行结果：
外部样式表
好了，终于到我们的外部样式表了，这也是我们开发中最常用的方式，因为我们大部分时候写的样式会很多，如果都写在html中多不方便呀，想看看html代码，要往后翻上百行代码，当然了，开发中是提倡结构和样式分离的，也就是你写你的html我写我的CSS，来上例子吧，首先我们写一个.css文件，也就是把我们的样式先写好，简单起见，我就写了一个样式。
/*这里只有样式*/
div {color: green;
}这个样式我是跟html文件放在一块的，方便html来引入该css样式，好了，说说怎么引入吧，用到了link标签，该标签里写了两个属性，反别是rel表示链接文档的类型，其中stylesheet代表是样式表文档，href是你写的css的路径，好了看具体操作吧
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外部样式表</title><!--rel表示链接的文档是一个样式表文档，href是css的文件路径--><link rel="stylesheet" href="style.css">
</head>
<body>
<div>要想生活过得去，身上必须带点绿</div>
</body>
</html>看看结果是不是我们想要的
创建文本过度
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>创建文本过度</title><style type="text/css">p{width: 100px;height: 100px;background-color: antiquewhite;}p:hover{width: 200px;height: 200px;background-color: #864eff;transition-delay: 150ms;/*当鼠标点上后的延迟时间*/transition-duration: 500ms;/*中间动画的时间*/}</style>
</head>
<body>
<p></p>
</body>
</html>
使用变换
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用变换</title><style type="text/css">p{width: 100px;height: 100px;background-color: antiquewhite;}p:hover{width: 100px;height: 100px;background-color: antiquewhite;transform: rotate(30deg);/*默认是以中心点顺时针旋转30度*/transform-origin: top right;/*设置以右上角点开始,这里也可以写例如10px 20px为距坐是10px像素距上是20px像素位置*//*transform: scale(2);!*整体放大2倍*!*//*transform: scale(2);!*横向放大2倍*!*//*transform: scale(2);!*纵向放大2倍*!*/}</style>
</head>
<body>
<p></p>
</body>
</html>
盒子模型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子模型</title><style type="text/css">.class1{border: 1px solid black;background-color: antiquewhite;/*背景颜色*/background-clip: content-box;/*设置背景只在内容区域显示*/padding-top: 20px;/*上边内边距*/padding-left: 20px;/*左边内边距*/padding-right: 20px;/*右边内边距*/padding-bottom: 20px;/*下边内边距*//*padding: 80px 60px 40px 20px;!*距上右下左的距离*!*/margin-top: 50px;/*上边外边距*/margin-right: 50px;/*右边外边距*/margin-left: 50px;/*左边外边距*/}</style>
</head>
<body>
<div class="class1">hello world</div>
</body>
</html>
CSS基本操作详解及截图演示相关推荐
- JSX设置CSS样式详解
JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...
- jQuery数组处理详解(含实例演示)
jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生js数组不能企及的功能. 最近时间紧迫,今天抽了些时间回过头来看 jQuery中文文档 中对数组的 ...
- 链表c++语言 解析,C++ 单链表的基本操作(详解)
链表一直是面试的高频题,今天先总结一下单链表的使用,下节再总结双向链表的.本文主要有单链表的创建.插入.删除节点等. 1.概念 单链表是一种链式存取的数据结构,用一组地址任意的存储单元存放线性表中的数 ...
- 第20节 核心交换机配置热备份详解及实验演示—基于Cisco Packet Tracer
核心交换机配置热备份详解及实验演示 1 网络规划 1.1 核心交换机的重要性及作用 1.2 对核心交换机做热备份 2 拓扑图分析 2.1 网络环路问题及解决方案 2.1.1 网络环路问题 2.1.2 ...
- css名词解析,小说CSS样式详解
CSS格式详解 字体格式(font) 字体 表格题目位置 once:只朗读一次(默许值): always:多次朗读: inherit:启当: 文字年夜小 font-size: xx-small | x ...
- 【MySQL基础】MySQL基本操作详解
系列文章目录 第1篇:[MySQL基础]MySQL介绍及安装 第2篇:[MySQL基础]MySQL基本操作详解 文章目录 ✍1,数据库操作
- Gavin老师Transformer直播课感悟 - Rasa项目实战之电商零售智能业务对话机器人配置详解与Debugging演示(八十七)
本文继续围绕工业级业务对话平台和框架Rasa,对Rasa项目实战之电商零售智能业务对话机器人系统所使用的各项配置进行详细剖析,并通过debug模式来理解在下面展示的Rasa graph archite ...
- Gavin老师Transformer直播课感悟 - Rasa项目实战之电商零售智能业务对话机器人ResponseSelector使用详解与Debugging演示(八十八)
本文继续围绕工业级业务对话平台和框架Rasa,对Rasa项目实战之电商零售智能业务对话机器人系统如何使用Rasa框架提供的ResponseSelector组件处理常见问题和用户闲聊内容的过程,以及如何 ...
- 二叉树前序中序后续线索树_后序线索二叉树怎么画 线索二叉树基本操作详解 - 办公软件 - 服务器之家...
后序线索二叉树怎么画 线索二叉树基本操作详解 发布时间:2017-05-23 来源:服务器之家 遍历二叉树是以一定规则将二叉树中结点排列成一个线性序列,得到二叉树中结点的先序,中序或后序序列.这实际上 ...
最新文章
- 一个Python小白5个小时爬虫经历
- 阎崇年：《袁崇焕传》自序
- 使用TextRank算法为文本生成关键字和摘要
- Linux Linux程序练习十二（select实现QQ群聊）
- 构建之法之单元测试及设计流程
- 秘鲁农业功臣-国际农民丰收节贸易会：蔬菜用广州话发音
- 【数据竞赛】Kaggle实战之特征工程篇-20大文本特征（下）
- 01-移动端开发教程-CSS3新特性（上）
- c 语言练习__去掉多余的空白字符_修正
- Android—打包aar以及module依赖操作
- SpringBoot 扫描包
- 16. CSS 轮廓
- LabVIEW--为控件添加说明信息
- 矩阵的转置例题MATLAB,MATLAB特殊矩阵以及矩阵转置
- 定时刷新页面 html,js实现定时刷新页面的代码
- qq互联登录授权php配置,开通qq互联开放平台登陆功能的步骤
- [源码解析] PyTorch 分布式之弹性训练(4)---Rendezvous 架构和逻辑
- 谈谈你对Spring 的理解
- 怎么区分zh和ch_怎样区分zhchsh与zcs
- JavaScript 中的事件类型3（读书笔记思维导图）