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).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
随机推荐
- JavaScript中正则使用
字符串是编程时涉及到的最多的一种数据结构,对字符串进行操作的需求几乎无处不在.比如判断一个字符串是否是合法的Email地址,虽然可以编程提取@前后的子串,再分别判断是否是单词和域名,但这样做不但麻烦, ...
- MySQL--15 MHA简介
目录 一.MHA简介 二.工作流程 三.MHA架构图 四.MHA工具介绍 五.基于GTID的主从复制 六.部署MHA 一.MHA简介 松信嘉範: MySQL/Linux专家 2001年索尼公司入职 ...
- 四 shell基本命令
一 内置命令 hlep 命令 帮助 help test help -s printf 显示内置命令的语法格式 echo 用来显示一行文字 echo "hello world&quo ...
- 《深入学习Redis（2）：持久化》笔记
参考 https://www.cnblogs.com/kismetv/p/9137897.html 一.高可用概述 提供正常服务:主从分离,快速容灾技术,数据容量的扩展.数据安全不会丢失. 持久 ...
- JavaScript的三大组成部分
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HTML中来实现 ...
- 牛客网NOIP赛前集训营-提高组（第六场） C-树
题目描述 有一棵有 n 个结点的树,每条边有编号为 0,1,2 的三种颜色,刚开始每条边颜色都为 0 . 现在有 3 种操作: \(1\ x\ y\ col\) ,表示询问 \(x\) 到 \(y\) ...
- nyoj 1022:合纵连横（并查集删点）
题目链接 参考链接 只附代码好了 #include<bits/stdc++.h> using namespace std; ; int a[N],b[N],vis[N]; int n,m, ...
- nuget cli 打包发包
微软官网打包说明:https://docs.microsoft.com/zh-cn/nuget/quickstart/create-and-publish-a-package-using-visual ...
- gensim Load embeddings
gensim package from gensim.models.keyedvectors import KeyedVectors twitter_embedding_path = 'twitter ...
- Debug模式自定义NSlog
#ifdef DEBUG # define DLog(fmt, ...) NSLog((@"[文件名:%s]\n" "[函数名:%s]\n" "[行号 ...