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种:内联式.嵌 ...
随机推荐
- 【Android珍藏】推荐10个炫酷的开源库【转】
感谢大佬:https://www.jianshu.com/p/d608f0228fd4 前言 技术群里面经常有人问到一些炫酷的UI效果实现方法,有时候我都是给一个相同或者相似效果的Github链接,有 ...
- js 对象的深克隆
前端笔试或者面试的时候,很喜欢问的一个问题就是对象的深度克隆,或者说是对象的深度复制.其实这个问题说容易很容易,但是要说全面也挺不易. 要弄明白对象的克隆,首先要明白js中对象的组成.在js中一切实例 ...
- 【转载收藏】使用Jacoco远程统计tomcat服务的代码覆盖率
在做软件开发的时候经常会遇到做各种测试,这里介绍一种本人遇到的:代码覆盖率测试, 这个测试非常实用,能发现许多无效的模块和代码.强烈推荐!!!!! 网上好多资料都不全,而且没有详细的配置流程 本文将简 ...
- DNS域名解析之分离解析
分离解析配置 1.为网关服务器配置双网卡 , 在关机状态下再添加一块网卡,重启系统 ifconfig ens36 12.0.0.1/24 ifconfig 2.安装bind软件包 yum instal ...
- 帆软报表（finereport) 组合地图 保持系列名和值居中
自定义JavaScript代码,使用HTML解析 function(){ var name = this.name; var total = '<div style="width:10 ...
- 3、网络并发编程--udp代码、操作系统发展史、多道技术、进程理论
昨日内容回顾 socket基本使用 # 内置的模块 import socket s = socket.socket() # 默认是TCP协议 也可以切换为UDP协议 s.bind((ip,port)) ...
- opencv笔记--Kmeans
在图像分割中,使用 kmeans 算法可以实现图像区域基本分割.如果一幅图像被分为两类,kmeans 分割效果与 ostu 算法基本一致,具体如下图: kmeans 将图像灰度聚类为 k 类, ...
- Diary -「CSP 2019 J/S」 游记
\(\text{Day 0}\) 试机, 总体感觉不错, 至少不像初一时候的紧张, 毕竟是中青年选手了 ( ? ) 当晚睡得挺好, 虽然是冲着一等奖去的, 但还是没有给自己过多的思想包 ...
- 面向对象—继承（Day19）
初识继承 继承是一种创建新类的方式,在python中新类可以继承一个或多个父类,父类又可称为基类或超类,新建的类为派生类或子类.(类与类之间的关系是什么是什么的关系.) 继承语法: class Par ...
- JS的一些对象
JS是基于对象的语言.当然此时都说是面向对象的语言. 类:模板,原型对象 对象:具体的实例 原型对象: var user = { name:"xiaoxiao", age:5 ...