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种:内联式.嵌 ...
随机推荐
- feiQ发送信息
import java.io.IOException; import java.net.DatagramPacket; import java.net.DatagramSocket; import j ...
- NFS共享存储服务 （如果厌倦了外面的生活，那就来我身边吧，帮我插秧）
NFS共享存储服务 1.NFS概述 2.在服务器使用NFS发布共享资源 3.在客户机中访问NFS共享资源 1.NFS概述: NFS是一种基于TCP/IP传输的网络文件系统协议.通过使用NFS协 ...
- 介绍回流与重绘（Reflow & Repaint），以及如何进行优化?
前言 回流与重绘对于前端来说可以说是非常重要的知识点了,我们不仅需要知道什么是回流与重绘,还需要知道如何进行优化.一个页面从加载到完成,首先是构建DOM树,然后根据DOM节点的几何属性形成render ...
- 使用IWebBrowser2操控浏览器页面测试（IE）
测试一下在IE浏览器界面中插入代码测试,采用寻找窗口的方式获取Internet Explorer_Server句柄. 写的时候参考了很多网上的资料,有些地方不大适用就稍微修改了一下. Send ...
- iptTable规范
规范之HTML 先在当前页面放入几个表格设置按钮的html(样式可能需重新调整) <div class="bottom_nav1 ta_l" style="padd ...
- tip8：CentOS8安装ftp服务器
之前习惯使用OpenSuse,其图形化的安装.现在刚开始使用CentOS,老老实实使用命令吧! 1.本地cmd命令ftp链接虚拟机无法链接.查出虚拟机ftp服务是否开启:没有 ps -ef|grep ...
- 详细介绍Windows下也能够使用osw性能升级历史
1.Windows系统历史性能分析困难背景 在Linux/Unix上.要追朔历史性能,一般採用部署nmon进行性能监控採集与存储的方式实现.可是却没有在Windows上的版本号. Windows系统假 ...
- RFC2889广播时延测试——网络测试仪实操
一.简介 RFC 2889为LAN交换设备的基准测试提供了方法学,它将RFC 2544中为网络互联设备基准测试所定义的方法学扩展到了交换设备,提供了交换机转发性能(Forwarding Perform ...
- 十分钟掌握CSS基本内容
(一) 定位 绝对定位和相对定位.其实用一句话说就是"子绝父相",理解这句话很多效果通过定位做出来的话都没问题了.一般平时用的都的情况都是子div设置为绝对定位 ...
- spring 核心容器api
spring api : https://docs.spring.io/spring-framework/docs/current/javadoc-api/ BeanFactory 才是 Spring ...