前端CSS基础
一:CSS
1.什么是CSS？
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
CSS3就是css语言，数字3是该语言的版本号
css语言开发的文件是以.css为后缀，通过在html文件中引入该css文件来控制html代码的样式（css语言代码也可以直接写在html文件中）
采用的语言是级联样式表 （Cascading Style Sheet），也属于标记语言。
层叠样式表>>>:就是给HTML标签修改样式
2.CSS3语法
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。
3.语法结构
选择器 {
属性名1:属性值1;
属性名2:属性值2
}
4.注释语法
/*注释内容*/
5.css代码书写位置(引入方式）
css是来控制页面标签的样式，但是可以根据实际情况书写在不同的位置，放在不同位置有不同的专业叫法，可以分为行内式、内部式和外部式三种。
- 1.style内部直接编写css代码
平时学习、练习的时候推荐使用 - 2.link标签引入外部css文件
正式工作、实际生产环境推荐使用 - 3.标签内直接书写
一般情况下不推荐使用 容易造成荣誉现象
二:scc代码书写位置(引入方式实战)
1.style内部直接编写css代码
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 {
color: red;
}
</style>
</head>
- 标题
<body>
<h1>又块到中午了 感觉有点饿</h1>
</body>
2.link标签引入外部css文件
外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css真正的.css">
</head>
- 标题
<body>
<h1>又块到中午了 感觉有点饿</h1>
</body>
3.标签内直接书写
<body>
<h1 style="color: blue">又块到中午了 感觉有点饿</h1>
</body>
三:css注释管理
- 单独开设的css文件内代码也是非常多的 可以借助于注释管理(方便后期查找)
- 示列
/*导航条样式*/
/*侧边栏样式*/
/*核心样式*/
/*右侧样式*/
四:基本选择器(重要)
1.css是用来调节标签样式的 那为什么需要学选择器呢?
因为同一个页面上有很多相似的标签 并且这些标签在不同的位置有不同的样式 所以为了能够区分 我们肯定先需要学习如何查找指定的标签
2.标签选择器>>>:通过标签名直接查找
/*查找所有的div标签*/
div {
color: red;
}
3.类选择器(关键符号为句点符.)>>>:通过class值查找标签
/*查找所有含有c1样式类的标签*/
.c1 {
color: red;
}
4.id选择器(关键符号为警号#)>>>:通过id值查找标签
/*查找id为d1的标签*/
#d1 {
color: orange;
}
5.通用选择器(了解)
/*body内所有的标签*/
* {
color: darkgray;
}
五:组合选择器(重点)
- 为了区分嵌套标签之间的关系 我们发明了一种称呼
<div>
<p>
<span></span>
</p>
</div>
span是p的儿子 是div的孙子也可以说是div的后代
p是div的儿子也是div后代 是span的父亲
div是p的父亲是span的爷爷 也可以说是他们的祖先
1.后代选择器(特征为空格)空格的意思是后代
/*查找div内部所有的后代span*/
<style>
div span {
color: red;
}
</style>
2.儿子选择器(特征>)
/*查找div内部所有的儿子span*/
<style>
div > span {
color: greenyellow;
}
</style>
3.毗邻选择器(特征为+)
/*查找同级别下面紧挨着的第一个span(不能有其他标签间隔)*/
<style>
div + span {
color: pink;
}
</style>
4.弟弟选择器(特征为~)
/*查找同级别下面所有的span(不需要紧挨着)*/
<style>
div ~ span {
color: deeppink;
}
</style>
六:属性选择器
- 标签可以有默认的属性也可以自定义属性
<p id="d1" class="c1" name="jason" pwd="123">123</p>
1.查找含有name属性名的标签
[name] { /*查找含有name属性名的标签*/
color: red;
}
2.查找含有name属性名并且值为jason的
[name='jason'] { /*查找含有name属性名并且值为jason的*/
color: red;
}
3.查找含有name属性名并且值为jason的p
p[name='jason'] { /*查找含有name属性名并且值为jason的p*/
color: red;
}
七:分组与嵌套
1.多个相同选择器并列使用
<style>
div,span,p { /*查找div或者span或者p*/
color: red;
}
</style>
2.多个不同选择器并列使用
<style>
div,#d1,.c1 { /*标签查找div id查找d1 类查找c1*/
color: red;
}
</style>
3.不并列同样可以使用组合选择器
<style>
.c1 p { /*查找class为c1的后代p标签*/
color: red;
}
</style>
4.直接筛选
<style>
div#d1 { /*查找id为d1的div标签*/
color: red;
}
</style>
5.查找class为c1的div标签
<style>
div.c1 { /*查找class为c1的div标签*/
color: red;
}
</style>
6.总结(嵌套分组选择器)
- 完成该题目，即可证明，已经掌握了选择器的精华了！
d1>div>.c1>span.c2
- (尽力自己做哦)
<style>
#d1>div>.c1>span.c2 {
color: red;
}
</style>
</head>
<body>
<div id="d1">1
<div>2
<p class="c1">3
<span class="c1">4</span>
<span class="c2">5</span>
</p>
<p class="c2">
<sapn class="c1"66></sapn>
<span class="c2">77</span>
</p>
</div>
</div>
</body>
7.解析题目
查找id为d1的标签内部的儿子div
并且在儿子div内部查找class为c1的儿子标签
并且在该儿子内部查找class为c2的儿子span
八:伪类选择器
1.鼠标悬浮在上面
a:hover {
color: orange;
}
"""a标签默认的颜色会变化 第一次是红色 后面是紫色"""
2.focus(聚焦状态)
<style>
#d1:focus {
background-color: red;
}
</style>
<body>
<input type="text" id="d1">
</body>
- """我们将input框被用户点击即将录入数据的过程看成是focus状态(聚焦状态)"""
3.未访问的链接
a:link {
color: #FF0000
}
4.选定的链接
a:active {
color: #0000FF
}
5.已访问的链接
a:visited {
color: #00FF00
}
前端CSS基础的更多相关文章
- 前端 CSS 基础
CSS概述 CSS全称:层叠样式表 (Cascading Style Sheets).CSS使得网站可以:创建文档内容清晰地独立于文档表现层. 样式表定义如何显示 HTML 元素,样式通常保存在外部的 ...
- 前端 -- CSS基础
一,CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). 二,CSS语法 1 ...
- web前端 CSS基础
简单的CSS文件 <style type="text/css"> a{ color:rebeccapurple; font-size: larger; font-wei ...
- Python 前端 Css基础
CSS样式存在的位置 1.放置在标签内,局部生效 <div style="color: red;font-size: 18px;">hello world</di ...
- 百万年薪python之路 -- 前端CSS基础介绍
一. CSS介绍 CSS定义 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 语法结构 div{ color: green ...
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- 零基础学WEB前端-CSS
CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- Web前端开发基础 第一天（Html和CSS）
学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户 ...
随机推荐
- LGP4001题解
题目大意 给定一张无向图,需要消耗代价才能使一条边被[数据删除],求使这张图不连通的最小代价. 一看就是最小割的应用啊... 从 \(u\) 到 \(v\),边权为 \(w\) 的边,建两条:一条从 ...
- 人生苦短，我用JRebel
昨天看到团子推送的一篇关于热部署的文章,其中介绍了自研的Sonic插件在公司内部的应用.同时晒出来一张对比图: 团子表示我们的插件要比同类插件优秀哦.不过我定睛一看,好家伙,第一列的JRebel在图中 ...
- VB、VBA、VBS的区别与联系
概念 VB Visual Basic(简称VB)是Microsoft公司开发的一种通用的基于对象的程序设计语言,为结构化的.模块化的.面向对象的.包含协助开发环境的事件驱动为机制的可视化程序设计语 ...
- 洛谷P1162—填涂颜色
这应该是是第一次记录洛谷题库里的题目吧: 题目描述 由数字00组成的方阵中,有一任意形状闭合圈,闭合圈由数字11构成,围圈时只走上下左右44个方向.现要求把闭合圈内的所有空间都填写成22.例如:6 \ ...
- 如何用 Redis 解决海量重复提交问题
前言 在实际的开发项目中,一个对外暴露的接口往往会面临很多次请求,我们来解释一下幂等的概念:任意多次执行所产生的影响均与一次执行的影响相同.按照这个含义,最终的含义就是 对数据库的影响只能是一次性的, ...
- 嵌入式Linux应用开发完全手册之环境搭建
@ 目录 0.下载源配置 1.电脑BIOS启动虚拟化 2.linux网卡查看与IP设置 3.windows NAT虚拟网络配置 4.修改 Ubuntu 的 mountd 端口 5.vim设置 6.Mo ...
- 《浅谈产品》——加油APP的平台是如何做的
最近油价又上涨了,我们平常去加油站加油用到"某滴加油"."某团加油"这些APP,一般情况下加200的油,各种优惠下来,最终只需要付170左右就可以了,基本是优惠 ...
- 数据结构 - 顺序表 C++ 实现
顺序表 此处实现的顺序表为**第一个位置为 data[0] **的顺序表 顺序表的定义为 const int MAX = 50; typedef int ElemType; typedef struc ...
- BUU findkey
定位关键函数 跟入flag找到问题位置 两行一样的代码,nop掉第二行,按p生成函数 代码审计 int __userpurge sub_4018C4@<eax>(int a1@<eb ...
- 【Spring AOP】暴力打通两个切面之间的通信
场景描述 在秒杀微服务中,笔者在需要各种校验前端传来的参数后,通过 Redis 加锁限流(切面A)并返回,最后封装订单数据推送到 RabbitMQ 消息队列(切面B)做善后工作. 问题:如何将 切面 ...