CSS学习Day01
1、什么是CSS
如何学习
CSS是什么
CSS怎么用
CSS选择器（重点+难点）
美化网页（文字、阴影、超链接、列表、渐变）
盒子模型
浮动
定位
网页动画（特效效果）
1.1什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS：表现（美化界面）
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动...
1.2 发展史
CSS1.0
CSS2.0 DIV（块）+CSS ，HTML与CSS结构分离的思想 网页变得简单，SEO
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画... 浏览器兼容性
1.3快速入门
style
基本入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <style> 每一个声明最好分号结尾
语法：
选择器{
声明1；
声明2；
声明3；
}
-->
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
建议使用这种规范
CSS的优势：
内容和表现分离
网页结构表现统一，可以实现复用
样式十分丰富
建议使用独立于html的css文件
使用SEO，容易被搜索引擎收录
1.4CSS导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 内部样式 -->
<style>
h1{
color: greenyellow;
}
</style>
<!-- 外部样式 -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级：就近原则-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red">我是标题</h1>
</body>
</html>
扩展：外部样式两种写法
链接式：
html
<!-- 外部样式 -->
<link rel="stylesheet" href="css/style.css">导入式：
@improt是CSS2.1特有的！
<!-- 导入式 -->
<style>
@import url("style.css");
</style>
2、选择器
作用：选择页面上的某一个或者某一类元素
2.1 基本选择器
1、标签选择器：选择一类标签 --》标签{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器，会选择到页面上所有的这个标签的元素 */
h1{
color: #0b79ed;
background: skyblue;
border-radius: 24px;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>学Java</h1>
<h1>学Java</h1>
<p>听杨神说</p>
</body>
</html>
2、类选择器 class：选中所有class属性一致的标签，跨标签 --》.类名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 类选择器的格式 .class的名称{}
好处：可以多个标签归类，是用一个class
*/
.yangting{
color: red;
}
.yangshen{
color: darkorchid;
}
</style>
</head>
<body>
<h1 class="yangting">标题1</h1>
<h1 class="yangshen">标题2</h1>
<h1 class="yangting">标题3</h1>
<p class="yangting">p标签</p>
</body>
</html>
3、id选择器：全局唯一！--》#id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* id选择器: #id名称{}
id必须保证全局唯一
优先级：
不遵循就近原则，是固定的：
id选择器> class选择器>标签选择器
*/
#yangting{
color: brown;
}
.style1{
color: #0b79ed;
}
h1{
color: chartreuse;
}
</style>
</head>
<body>
<h1 id="yangting">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>
注：优先级： id > class > 标签
2.2层次选择器
1、 后代选择器：在某个元素的后面 祖爷爷 爷爷 爸爸 你
/*后代选择器*/
body p{
background: brown;
}
2、子选择器 一代，儿子
/*子选择器*/
body>p{
background: #0b79ed;
}
3、相邻兄弟选择器 同辈
/*相邻兄弟选择器： 只有一个，相邻（向下）*/
.active + p{
background: green;
}
4、通用选择器
/*通用兄弟选择器：当前选中元素的向下的所有兄弟元素*/
.active~p{
background: greenyellow;
}
2.3结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--避免使用，class和id选择器-->
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: aqua;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: darkorchid;
}
/* 选中 p1 : 定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个
并且是当前元素才生效
按照顺序选择
*/
p:nth-child(1){
background: yellow;
}
/*选中父元素下的p元素的第二个
按照类型选择
*/
p:nth-of-type(2){
background: red;
}
/*a:hover{*/
/* background: yellow;*/
/*}*/
</style>
</head>
<body>
<!-- <a href="">123456</a>-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
2.4属性选择器
id + class 结合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: aqua;
text-align: center;
color: brown;
text-decoration: none;
margin-right: 5px;
font:bold 20px/50px Arial;
}
/* 属性名 or 属性名=属性值（正则）
= 绝对等于
*= 包含这个元素
^= 以这个开头
￥= 以这个结尾
*/
/*存在id属性的元素 a[]{} */
/*id=first的元素*/
/*a[id=first]{*/
/* background: yellow;*/
/*}*/
/*class中有links的元素*/
/*a[class*="links"]{*/
/* background: yellow;*/
/*}*/
/*选中href中以http开头的元素*/
/*a[href^=http]{*/
/* background: yellow;*/
/*}*/
a[href$=pdf]{
background: yellow;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="http://www.kuangstudy.com" class="links item active" target="_blank" title="test" >2</a>
<a href="images/123.html" class="links item active">3</a>
<a href="images/123.png" class="links item">4</a>
<a href="images/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>
3.美化网页元素
3.1为什么要美化网页
1、有效的传递页面信息
2、美化网页，页面漂亮才能吸引用户
3、凸显页面的主题
4、提高用户的体验
span标签：重点要突出的字，使用span套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习 <span id="title1">Java</span>
</body>
</html>
3.2字体样式
<!--
font-family:字体
font-size： 字体大小
font-weight：字体粗细
color：字体颜色
-->
<style>
body{
font-family: "Arial Black", 楷体;
color: chocolate;
}
h1{
font-size: 30px;
}
.p1{
font-weight: bold;
}
</style>
3.3文本样式
1、颜色 color rgb rgba
2、文本对齐方式 text-align = center
3、首行缩进 text-indent: 2em;
4、行高 line-height; 单行文字上下居中！ line-height = height
5、装饰 text-decoration;
6、文本图片水平对齐 vertical-align: middle;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
颜色：
单词
RGB 0~F
RGBA A:0~1
text-align: 排版，居中
text-indent: 2em; 段落首行缩进
height: 300px;
line-height: 300px;
行高，和块的高度一致，就可以上下居中
-->
<style>
h1{
color: rgba(0,255,255,0.4) ;
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: darkorchid;
height: 300px;
line-height: 300px;
}
/*下划线*/
.l1{
text-decoration: underline;
}
/*中划线*/
.l2{
text-decoration: line-through;
}
/*上划线*/
.l3{
text-decoration: overline;
}
/*超链接去下划线*/
a{
text-decoration: none;
}
/*<!--*/
/*水平对齐 需要参照物 a,b*/
/*-->*/
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<a href="">123</a>
<p class="l1">123123</p>
<p class="l2">123123</p>
<p class="l3">123123</p>
<h1>诗介绍</h1>
<p class="p1">
假如我是一只鸟，
我也应该用嘶哑的喉咙歌唱：
这被暴风雨所打击着的土地，
这永远汹涌着我们的悲愤的河流，
这无止息地吹刮着的激怒的风，
和那来自林间的无比温柔的黎明……
</p>
<p>
——然后我死了，
连羽毛也腐烂在土地里面。
为什么我的眼里常含泪水？
因为我对这土地爱得深沉……
</p>
<p class="p3">
If I were to fall in love，It would have to be with youYour eyes，
your smile，The way you laugh，The things you say and do。Take me to the places
</p>
<p>
<img src="data:images/3.png" alt="" width="300px" height="200px">
<span>you are so beautiful!</span>
</p>
</body>
</html>
CSS学习Day01的更多相关文章
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- css学习归纳总结（三） 转
原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...
- css学习归纳总结（二） 转
原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...
- css学习归纳总结（一） 转
原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...
- 【2016年特别福利】史上最全CSS学习资料大全
css学习篇 [2016年特别福利]史上最全CSS学习资料大全
- 【转】css学习专题-BFC
css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...
- css学习归纳总结
来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...
- html+css学习总结
HTML与css学习总结 一:html概念 1. html是一种描述网页的语言,并不是计算机语言这要分清楚:标记语言是运用一套标记标签描述网页的: 注意点: ①标签字母都要小写,标签一般都是成对出现, ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
随机推荐
- 入门 - k8s滚动更新部署中的镜像版本 （七）
目标 使用 kubectl 执行 Rolling Update(滚动更新) 更新应用程序 用户期望应用程序始终可用,为此开发者/运维者在更新应用程序时要分多次完成.在 Kubernetes 中,这是通 ...
- KubeSphere单节点(all-in-one)平台搭建记录
KubeSphere单节点(all-in-one)平台搭建记录 目录 KubeSphere单节点(all-in-one)平台搭建记录 一.主机准备 1.1 主机配置 1.2 环境准备 二.下载kube ...
- 如何在Kubernetes 里添加自定义的 API 对象（一）
环境: golang 1.15 依赖包采用go module 实例:现在往 Kubernetes 添加一个名叫 Network 的 API 资源类型.它的作用是,一旦用户创建一个 Network 对象 ...
- Solution -「多校联训」I Love Random
\(\mathcal{Description}\) 给定排列 \(\{p_n\}\),可以在其上进行若干次操作,每次选取 \([l,r]\),把其中所有元素变为原区间最小值,求能够得到的所有不同序 ...
- 模块和包—Day28
一.模块 模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. import的过程:import一个模块的时候,首先创建一个属于my_module的内存空间,加载my_ ...
- SpringBoot+ShardingSphere彻底解决生产环境数据库字段加解密问题
前言 互联网行业公司,对于数据库的敏感字段是一定要进行加密的,方案有很多,最直接的比如写个加解密的工具类,然后在每个业务逻辑中手动处理,在稍微有点规模的项目中这种方式显然是不现实的,不仅工作量大而 ...
- Linux系列——常规基础操作
1.配置IP a.若安装桌面版系统,直接GUI画面配置,操作直观.简单 b.若安装非桌面版系统,进行如下配置: 1).ifconfig命令(临时配置,重启后失效) ifconfig eth ...
- 前端点击png透明部分解决方案
看效果:点击空白区域红色1.点击实体区域红色2.分别得到颜色数据(包括透明度数据),控制台蓝色1.2.根据颜色数据即可解决png透明部分的点击问题. 让图片不能点击,分两种 1. 整张图片不能点击.这 ...
- Flash挂马实验
实验目的 了解Flash木马的原理和危害 实现实验所提到的命令和工具,得到实验结果 实验原理 利用Flash挂马的原理并模拟实现挂马 实验内容 掌握Flash挂马的原理并模拟实现挂马 实验环境描述 1 ...
- CVE-2021-40449 NtGdiResetDC UAF
背景 CVE-2021-40449是一个存在于Win32k内核驱动中的UAF漏洞.该漏洞在2021年八月下旬九月上旬被Kaspersky发现用于野外攻击活动中.通过Hook win32k驱动执行N ...