CSS学习笔记（基础部分）
一、CSS 简介：
CSS 指层叠样式表 (Cascading Style Sheets)，用来设置HTML的格式。
语法：选择器 {属性:值;属性:值}
注释：//注释内容 /*注释内容*/
二、CSS的引入方式：行内嵌、嵌入式、链接式、导入式
1.行内嵌：
<body>
<p style="color: red">hello world</p>
</body>
2.嵌入式：
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: green;
}
</style>
</head>
<body>
<p>hello world</p>
</body>
</html>
3.链接式：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<p>hello world</p>
</body>
</html>
css文件
p {
color: red;
}
4.导入式：
<!DOCTYPE html>
<html>
<head>
<style>
@import "mystyle.css";
</style>
</head>
<body>
<p>hello world</p>
</body>
</html>
样式优先级：
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
三、选择器
1.基本选择器
1.1通用选择器
<!DOCTYPE html>
<html>
<head>
<style>
* {
color: red;
}
</style>
</head>
<body>
<h>hello</p>
<p>world</p>
</body>
</html>
1.2标签选择器
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<h1>hello</h1>
<p>world</p>
</body>
</html>
1.3 ID选择器
<!DOCTYPE html>
<html>
<head>
<style>
#name {
color: red;
}
</style>
</head>
<body>
<p>hello</p>
<p id="name">诸葛孔明</p>
</body>
</html>
1.4class选择器
<!DOCTYPE html>
<html>
<head>
<style>
.name {
color: red;
}
</style>
</head>
<body>
<p class="name">诸葛孔明</p>
<p class="name">诸葛子瑜</p>
<p class="name">诸葛公休</p>
</body>
</html>
2.组合选择
2.1后代选择器
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#food p{
color: green;
}
#food div{
font-size: 20px;
}
</style>
</head>
<body>
<div id="food">
<div class="fruits">
<p>苹果</p>
<p>香蕉</p>
</div>
<div class="dessert">
<p>蛋糕</p>
<p>巧克力</p>
</div>
</div>
</body>
</html>
2.2子代选择器
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#food>p{
color: green;
}
#food>div{
font-size: 20px;
}
</style>
</head>
<body>
<div id="food">
<div class="fruits">
<p>苹果</p>
<p>香蕉</p>
</div>
<div class="dessert">
<p>蛋糕</p>
<p>巧克力</p>
</div>
</div>
</body>
</html>
2.3变形选择器
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#fav, .fruits{
color: red;
}
</style>
</head>
<body>
<p id="fav">Favourite</p>
<div id="food">
<div class="fruits">
<p>苹果</p>
<p>香蕉</p>
</div>
<div class="dessert">
<p>蛋糕</p>
<p>巧克力</p>
</div>
</div>
</body>
</html>
2.4毗邻选择器
紧接在另一元素后的元素，且二者有相同父元素。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div+p{
color: red;
}
</style>
</head>
<body>
<p>p 1</p>
<div>
<p>div1</p>
</div>
<p>p 2</p>
<p>p 3</p>
</body>
</html>
3.属性选择器
[attribute] [target] 选择所有带有target属性元素
[attribute=value] [target=-blank] 选择所有使用target="-blank"的元素
[attribute~=value] [title~=flower] 选择标题属性包含单词"flower"的所有元素
[attribute|=language] [lang|=en] 选择一个lang属性的起始值="EN"的所有元素
[attribute^=value] a[src^="https"] 选择每一个src属性的值以"https"开头的元素
[attribute$=value] a[src$=".pdf"] 选择每一个src属性的值以".pdf"结尾的元素
[attribute*=value] a[src*="runoob"] 选择每一个src属性的值包含子字符串"runoob"的元素
4.伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link{ /* 没有访问过的连接 */
color: red;
}
a:visited{ /* 已经访问过的颜色 */
color: green;
}
a:hover{ /* 鼠标放上的颜色 */
color: yellow;
}
a:active{ /* 鼠标点击时的颜色 */
color: blue;
}
p:after{ /* 位于元素之后的格式 */
content: ' world';
}
p:before{ /* 位于元素之前的格式 */
content: "你好 世界";
color: green;
}
</style>
</head>
<body> <a href="https://www.baidu.com">百度一下</a>
<p>hello</p>
</body>
</html>
四、属性
1.背景属性
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style type="text/css">
div {
height: 1000px;
background-color: gray;
background-image: url("mayun.jpg");
background-repeat: no-repeat;
background-size: 200px, 300px;
background-position:center;
/* background-attachment:fixed; */
//可以简写为下面的格式
//background: url("mayun.jpg") gray no-repeat center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2.颜色属性
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style type="text/css">
h1 {
color: #87CEEB;
/* color: red; */
/* color: rgb(255,255,0); */
/* color:rgba(255,0,0,0.2); */
opacity: 0.5 /* 透明度 */
}
</style>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
3.字体属性
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style type="text/css">
h1 {
font-family:"Times New Roman", Times, serif;
font-size: 30px;
font-style: italic;
font-weight:lighter;
}
</style>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
font-weight的属性值
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100-900 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
4.文本属性
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style type="text/css">
p {
color: green; /* 字体颜色 */
direction: ltr; /* 字体方向 rtl */
letter-spacing: 5px; /* 字母间隔 */
word-spacing:30px; /* 单词间隔 */
line-height: 30px; /* 行距 */
text-align: center; /* 位置：left|right|justify */
text-decoration:line-through; /* 删除线：overline | underline */
text-transform:capitalize; /* 大小写：uppercase|lowercase */
}
</style>
</head>
<body>
<p>life is short, <br>you need python.</p>
</body>
</html>
5.内外边距
外边距：
margin:10px 5px 15px 20px;
上边距是 10px
右边距是 5px
下边距是 15px
左边距是 20px
margin:10px 5px 15px;
上边距是 10px
右边距和左边距是 5px
下边距是 15px
margin:10px 5px;
上边距和下边距是 10px
右边距和左边距是 5px
margin:10px;
所有四个边距都是 10px
margin-bottom 设置元素的下外边距
margin-left 设置元素的左外边距
margin-right 设置元素的右外边距
margin-top 设置元素的上外边距
内边距：
padding 与margin相同
6.边框
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style type="text/css">
div {
height: 200px;
width: 200px;
/* border:red solid 5px; */
border-bottom:red solid 5px;
border-top: green dotted 5px;
border-left: blue dashed 5px;
border-right: gray double 5px;
border-radius:20%;
}
</style>
</head>
<body>
<div>
</div> </body>
</html>
7.宽高设置：
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
min-height 设置元素的最小高度。
width 设置元素的宽度。
max-width 设置元素的最大宽度。
min-width 设置元素的最小宽度。
8.display:
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
五、元素位置：
正常文档流：
将元素（标签）在进行排版布局的时候按从左到右，从上到下的顺序进行排版
脱离文档流：
将元素（标签）从文档流中取出进行覆盖，其他元素会按文档流中不存在该元素重新进行布局
非完全脱离：float（浮动）
完全脱离：position（定位）中的absolute,fixed
1.float
float 使元素向左或向右移动，其周围的元素也会重新排列 属性值：left | right
clear 指定不允许元素周围有浮动元素。 属性值：left | right | both
2.position
2.1static：默认值
2.2relative：相对其正常位置
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#p2{
position: relative;
left: 20px;
}
</style>
</head>
<body>
<p id="p1">hello world</p>
<p id="p2">hello world</p>
</body>
</html>
2.3 fixed:位置相对于浏览器窗口是固定位置
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
a{
position: fixed;
right: 100px;
bottom: 100px; }
</style>
</head>
<body>
<div id="top" style="height: 50px;background-color: green"></div>
<div id="content" style="height: 1000px; background-color: gray"> </div>
<a href="#top">返回顶部</a>
</body>
</html>
2.4 absolute:
如果其父级的position设置为非static，则按照父级的位置进行移动，如果没有就继续向上找，如果都没有就按html的位置进行移动.
在下面的例子中，如果div1没有设置position的属性，那么div2就会按照HTML的相对位置进行定位，如果设置了div1的relative，那么div2才会按照div1的位置进行定位。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* #div1{
position: relative;
} */
#div2{
position: absolute;
top: 100px; }
</style>
</head>
<body>
<div style="width: 300px;height: 200px;background-color: gray"></div>
<div id="div1" style="width: 300px;height: 200px;background-color: green">
<div id="div2" style="width: 300px;height: 100px;background-color: red"></div>
</div>
</body>
</html>
2.5 sticky
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div2{
position: -webkit-sticky;
position: sticky;
top: 0;
}
</style>
</head>
<body>
<div id="div1" style="height: 200px;background-color: gray"></div>
<div id="div2" style="height: 100px;background-color: green"></div>
<div id="div3" style="height: 800px;background-color: gray"></div>
</body>
</html>
六、导航栏
<!DOCTYPE html>
<html>
<head>
<title>我的主页</title>
<style type="text/css">
/* 全局设置，取消外边框 */
* {
margin: 0;
padding: 0;
}
/* 顶部的高度 和背景颜色*/
.head{
height: 44px;
background-color: #2459a2;
}
.head-content {
position: relative;
margin: auto;
width: 1024px;
height: 44px;
line-height: 44px;
background-color: #2459a2;
/* background-color: red; */
} .menu {
margin-left: 50px;
} .menu ul li, .login a{
list-style-type: none;
display: inline-block;
float: left;
padding: 0 15px; } .head-content a{
text-decoration: none;
color: white;
} .active{
background-color: #006400;
} .menu li:hover:not(.active),.login a:hover{
background-color: gray;
} .login {
/* background-color: blue; */
float: right;
margin-right: 50px;
}
</style>
</head>
<body>
<div class="head">
<div class="head-content">
<div class="menu">
<ul>
<li class="active" ><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#blog">博客</a></li>
<li><a href="#bbs">论坛</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</div>
<div class="login">
<a href="#login">注册</a>
<a href="#register">登录</a>
</div>
</div>
</div>
</body>
</html>
导航栏
七、下拉菜单
CSS学习笔记（基础部分）的更多相关文章
- html+css学习笔记 [基础1]
---------------------------------------------------------------------------------------------------- ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
- CSS学习笔记08 浮动
从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记（5）- 与浏览者交互，表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
随机推荐
- Solr的学习使用之（一）部署
Solr的主要功能是全文检索,该功能分为两个过程:创建索引和对索引进行搜索 一.心得体会 第一次写技术博客,这次写的基本上都是从网络上整理的来的,外加自己的一些实践,以后争取全部原创哈,都说写技术博客 ...
- Linux学习笔记之磁盘与文件系统的管理
三．Linux磁盘与文件系统的管理 MBR扇区(512B) 磁盘的分区组成 Boot sector 扇区(用来装引导程序) Super block 记录inode与Block的信息 Inod ...
- python浮点数与整数间的转化
舍弃小数部分 >>> math.trunc(12.533222) 12 >>> round(12.2544) 12 按给定小数位数四舍五入 >>> ...
- 【Shiro】SpringBoot集成Shiro
项目版本: springboot2.x shiro:1.3.2 Maven配置: <dependency> <groupId>org.apache.shiro</grou ...
- iOS系统日历选择问题
参考:https://blog.csdn.net/lg_sun/article/details/78913064 -(NSString *)getTimeToken{ NSDateFormatter ...
- 重新调整动态vhdx占用的空间
优化vhd:https://docs.microsoft.com/en-us/powershell/module/hyper-v/optimize-vhd?view=win10-ps 1. 弹出vhd ...
- webpack使用问题记录
1.版本问题 webpack的安装并不是越新越好.当使用最新版本时不使用配置文件,直接编译不生成文件甚至报错:使用3.12版本时编译文件可以成功但是不生成新文件:使用 3.5.3 版本时成功且生成新文 ...
- JS中数据结构之队列
队列是一种列表,不同的是队列只能在队尾插入元素,在队首删除元素.队列用于存储按 顺序排列的数据,先进先出. 队列的两种主要操作是:向队列中插入新元素和删除队列中的元素.插入操作也叫做入 队,删除操作也 ...
- linux 下启动tomcat 时没有执行权限
原因: 没有权限 解决 : chmod 777 *.sh Linux下启动tomcat
- zabbix(一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案)
zabbix 是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案.zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位/解决 ...