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种:内联式.嵌 ...
随机推荐
- indexOf() 和 lastIndexOf()
一,定义和用法 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索 ...
- K8s二进制部署单节点 master组件 node组件 ——头悬梁
K8s二进制部署单节点 master组件 node组件 --头悬梁 1.master组件部署 2.node 组件部署 k8s集群搭建: etcd集群 flannel网络插件 搭建maste ...
- OSPF多区域的进阶强化版
OSPF多区域 1.OSPF多区域原理 2.末梢区域配置 1.生成OSPF多区域的的原因:改善网络的可扩展性,快速收敛. OSPF的三种通信量:a域内通信量(单个区域内的路由器之间交换数据包构成的通信 ...
- docker基础——5.Dockerfile
把应用部署在容器中,改变了用文本文件保存配置信息的方式.而通过传环境变量配置. Dockerfile是一个文本文件,包括容器的指令.按顺序从上到下执行,第一行非注释指令必须是FROM指定基础镜像. D ...
- 浅谈Java中重写与重载的区别
重载和重写是Java中两个截然不同的概念.但是却因为名字相近导致很多人经常混淆. 下面用例子展示出他们之间的区别. 在Java中,重载(overloading) 发生在本类.方法名相同,参数列表不同, ...
- 基于TI DSP TMS320C6455、Xilinx V5 FPGA XC5VSX95T的高速数据处理核心板
一.板卡概述 该DSP+FPGA高速信号采集处理板由我公司自主研发,包含一片TI DSP TMS320C6455和一片Xilinx V5 FPGA XC5VSX95T-1FF1136i.包含1个千兆网 ...
- Blob检测
一 Laplace 算子 使用一阶微分算子可以检测图像边缘.对于剧烈变化的图像边缘,一阶微分效果比较理想.但对于缓慢变化的图像边缘,通过对二阶微分并寻找过零点可以很精确的定位边缘中心.二阶微分即为 L ...
- c++ 动态内存2
动态内存 vector<int> * gen_vector(const size_t &size) { return new vector<int>(size, 0); ...
- 记一次慢查询优化sql
sql语句优化(慢查询日志) 最近,旧系统向新系统迁移工程刚刚结束.开发完成后,测试阶段也是好好休息了一把.接到一个需求,由于内部员工使用的网站部分功能加载时间很长,所以需要去优化系统的一些功能.大致 ...
- VS Code 在线运行：code-server部署(系列一)
偶然间发现VS Code可以在线运行,闲来无事部署了一套试试效果,先上图,是不是很熟悉的感觉,初步体验基本跟本地运行效果一样. 进入正题 首先要准备一套linux环境,环境配置最低是1G内存.2核CP ...