CSS-part1
一. CSS选择器
1.css引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 嵌入式 -->
<style>
p {
color: #0d93ff;
font-size: 30px;
}
</style>
<!-- 外链式: 常用. 符合解耦合 -->
<link rel="stylesheet" href="css/a.css">
<!-- 导入式: 了解 -->
<style>
@import url(css/a.css);
</style>
</head>
<body>
<!--行内式-->
<!--<p style="color:red;font-size: 50px">你好呀</p>-->
<p>来冲啊</p>
</body>
</html>
css样式后面的样式会将前面的覆盖
2.基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- id选择器-->
<style>
#p1 {
color: red;
}
</style>
<!-- 类选择器 -->
<style>
.p2 {
color: yellow;
font-size: 50px;
text-decoration: underline;
}
</style>
</head>
<body>
<p class="p2">111</p>
<p id="p1">222</p>
<p class="p2">333</p>
</body>
</html>
3.选择器后代与兄弟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 组合选择器不一定必须是标签名. 常配合类属性使用-->
<style>
/*匹配div子孙后代中含有p标签的*/
div p {
color: #0d93ff;
}
/* 相邻兄弟选择器: 只会向下找相邻兄弟*/
div+p {
color: red;
font-size: 50px;
}
/* 同级选择器. 向下*/
div~p {
color: yellow;
}
/* 儿子选择器: 只找儿子节点*/
div>p {
color: red;
}
/* 借助类选择器定位的p标签 */
.box2 ul p {
color: green;
}
</style>
</head>
<body>
<p>我是你爹</p>
<div>
<p>哈哈啊哈哈哈</p>
<ul>
<li>
<ul>
<li>
<p>孙庆军</p>
</li>
<li>
<p>给我冲</p>
</li>
<li>
<p>快点</p>
</li>
</ul>
</li>
</ul>
</div>
<hr>
<p>我是儿子</p>
<div class="box2">
<p>hello world</p>
<ul>
<li>
<ul>
<li>
<p>what</p>
</li>
<li>
<p>are you doing</p>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
4.交并集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*一般是标签名配合类属性进行使用*/
/*交集选择器*/
div.box1 {
font-size: 100px;
color: yellow;
}
/*并集选择器*/
div,h1 {
color: red;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>
<p>我是孙庆军</p>
<h2>我想冲</h2>
<a href="">点我啊</a>
</li>
</ul>
</div>
<h1 class="box1">恩额嗯</h1>
</body>
</html>
5.序列选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 同级别中第一个是p标签 */
p:first-child {
color: red;
}
/* 同级别中最后一个是p标签 */
p:last-child {
color: yellow;
}
/* 同级别中第三个是p标签 */
p:nth-child(3) {
color: green;
}
/* 同级别中寻找第一个p标签 */
p:first-of-type {
color: royalblue;
}
/* 同级别中寻找最后一个p标签 */
p:last-of-type {
color: #2f0099;
}
/* 同级别中寻找p标签中的第三个*/
p:nth-of-type(3) {
color: #e700b9;
}
/* 同一级别只有一个p标签的 */
p:only-child {
color: #9e2633;
}
/* 同一级别同一类型 */
p:only-of-type {
color: red;
}
</style>
</head>
<body>
<h1>what</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6</p>
<a href=""></a>
<p>我是段落7</p>
<p>我是段落8</p>
<ul>
<li>
<table></table>
<p>我是菜鸡</p>
<a href=""></a>
</li>
</ul>
</div>
</body>
</html>
6.属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
/* 属性选择器是完全匹配.如果想多匹配只能加上各种通配符 */
[id] {
color: red;
}
p[id] {
font-size: 30px;
}
p[class="part1"] {
color: green;
}
a[href^="https"] {
font-size: 50px;
}
img[src$="png"] {
width: 100px;
}
[class*="part"] {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1 id="id1">哈哈啊</h1>
<p id="id2">我是段落</p>
<p class="part1">我是段落</p>
<p class="xxx part2 yyy">我是段落</p>
<a href="#">我是我</a>
<a href="http://www.baidu.com">http://www.baidu.com</a>
<a href="https://www.baidu.com">https://www.baidu.com</a>
<img src="1.png" alt="">
<img src="2.jpg" alt="">
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
7.伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*超链接样式*/
a:link {
color: red;
}
/*鼠标在超链接上悬浮*/
a:hover {
color: blue;
font-size: 50px;
}
/*超链接长按*/
a:active {
color: green;
}
/*超链接点击后*/
a:visited {
color: red;
}
/*标签点击*/
input:focus {
background: red;
outline: none;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">啥鬼额</a>
<p>
用户名:<input type="text" >
</p>
</body>
</html>
8.伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*对首字母进行操作*/
p:first-letter {
font-size: 50px;
}
/*在p标签前面加东西*/
p:before {
content: '*';
color: red;
}
/*在p标签后面加东西*/
p:after {
content: '//';
color: green;
}
</style>
</head>
<body>
<p>hello world</p>
</body>
</html>
9.css三大特性
1. 继承性
定义: 给某一个元素设置一些属性中. 该元素后代也可以使用. 这个就是继承性
注意:
1. 只有以color.font-.text-.line-开头的属性才可以继承
2. a标签的文字颜色和下划线是不能继承别人的
3. h标签的文字大小是不能继承别人的. 会变大. 但会在原来字体的基础上变大
应用场景:
通常基于继承性同一设置网页的文字颜色. 字体. 文字大小等样式
2. 层叠性
定义: css: Cascading StyleSheet层叠样式表.层叠性指的是css处理冲突的一种能力
多个选择器选中一个标签会产生覆盖效果
注意:
1. 层叠性只有在多个选择器选中了同一个标签. 然后设置了相同的属性. 才回发生层叠性
3. 优先级
定义: 当多个选择器选中同一个标签.并且给同一个标签设置相同的属性时. 如何层叠就由优先级来决定
优先级:
整体优先级从高到低: 行内样式>嵌套样式和外部样式
1. 大前提: 直接选中>间接选中(即继承而来的)
#1、以下为直接选中
<style type="text/css">
#id1 {
color: red;
}
.ppp {
color: green;
}
p {
color: blue;
}
</style>
#2、以下为间接选中
<style type="text/css">
ul {
color: yellow;
}
</style>
<ul>
<li>
<p id="id1" class="ppp">我是span</p>
</li>
</ul>
2. 如果都是直接选中. 那么谁离目标标签比较近. 就听谁的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
/*离目标近*/
li {
color: red;
}
/*离目标远*/
ul {
color: yellow;
}
</style>
</head>
<body>
<ul>
<li>
<p id="id1" class="ppp">我是span</p>
</li>
</ul>
</body>
</html>
3. 如果都是直接选中. 并且都是同类型的选择器. 那么就是谁写的后面就听谁的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
p {
color: red;
}
/*同样都是标签选择器，谁写在后面谁生效*/
p {
color: yellow;
}
</style>
</head>
<body>
<ul>
<li>
<p id="id1" class="ppp">我是span</p>
</li>
</ul>
</body>
</html>
4. 如果都是直接选中，并且是不同类型的选择器，那么就会按照选择器的优先级来层叠
id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认（即没有设置任何属性）
5. 添加!important可强制修改优先级
* {
color: yellow !important;
}
二. CSS样式布局
1.文字属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
font-weight: bolder;
font-style: italic;
font-size: 50px;
font-family: "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, monospace;
/*可直接按照顺序写一行*/
/*font: bolder italic 50px "Bitstream Vera Sans";*/
/*设置颜色 透明度*/
color: rgba(200, 100, 500, 0.5);
}
</style>
</head>
<body>
<p>一行白鹭上青天</p>
</body>
</html>
2.文本属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
background: red;
/*文本排列*/
/*text-align: center;*/
/*设置字体高度适配*/
line-height: 200px;
/*text-decoration: underline;*/
text-decoration: line-through;
/*设置缩进*/
text-indent: 20px;
}
</style>
</head>
<body>
<div>
你干嘛...
</div>
</body>
</html>
3.背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
/*设置盒子大小*/
width: 500px;
height: 500px;
background-color: red;
/*背景图片会平铺整个背景*/
background-image: url(img/dog.jpg);
/*可以设置跟背景一个大小. 设置x轴. y轴也会适配*/
background-size: 100px 100px;
background-repeat: no-repeat;
/*background-repeat: repeat-x;*/
/*background-repeat: repeat-y;*/
/*设置背景图片的位置*/
/*background-position: 水平方向 垂直方向位置;*/
background-position: left top;
/*可以在当前标签中固定或随着页面滚动而滚动*/
background-attachment: fixed;
}
.box2 {
width: 200px;
height: 200px;
background: #9261ff;
}
</style>
</head>
<body>
<div class="box1">
<!-- 图片背景只是个背景. 不会占用位置. 这一串数字会出现在图片上面-->
<p>12739812379</p>
</div>
<div class="box2">
fasdfasd
</div>
</body>
</html>
背景图片和插入图片的区别:
1、
背景图片仅仅只是一个装饰，不会占用位置，
插入图片会占用位置
2、
背景图片有定位属性，可以很方便地控制图片的位置，
而插入图片则不可以
3、
插入图片语义比背景图片的语义要强，所以在企业开发中如果你的图片
想被搜索引擎收录，那么推荐使用插入图片
4.导航条拼接
练习：累计成一个大背景可以减少带宽，流量
前端优化方式：1.静态文件压缩，下载到本地，减少空间
2.使用精灵图，减少发送网络io次数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*导航条拼接*/
.box1 {
width: 100%;
height: 50px;
background-image: url(img/dht.png);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
5.精灵图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*将大图片的指定位置移动到小div的位置显示. 实现截取部分图标*/
.box1 {
width: 86px;
height: 28px;
background-image: url(img/icon.png);
background-position: -425px -100px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
6.盒子边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*设置边框样式*/
.box1 {
width: 200px;
height: 200px;
background: red;
/*border: 1px solid black;*/
/*border: 1px dotted black;*/
/*border-width: 1px 2px 3px 4px;*/
/*border-style: solid dotted dashed double;*/
/*border-color: blue darkgreen black #FCFDFA;*/
border: 1px solid black;
/*添加弧度边框*/
border-radius: 10px;
/*控制文本*/
text-align: center;
/*奇淫技巧*/
line-height: 200px;
}
</style>
</head>
<body>
<div class="box1">
11111
</div>
</body>
</html>
7.内边距
注意:
1 给标签设置内边距后，标签内容占有的宽度和高度会发生变化，设置padding之后标签内容的宽高是在原宽高的基础上加上padding值。如果不想改变实际大小，那就在用宽高减掉padding对应方向的值
2 padding是添加给父级的，改变的是父级包含的内容的位置
3 内边距也会有背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 150px;
height: 150px;
border: 1px solid black;
background-color: red;
}
.box1 {
padding-bottom: 50px;
}
.box2 {
padding-top: 50px;
}
.box3 {
padding-left: 50px
}
.box4 {
padding-right: 50px
}
.box5 {
padding: 70px;
}
</style>
</head>
<body>
<div class="box1">我是文字我是文字</div>
<hr>
<div class="box2">我是文字我是文字</div>
<hr>
<div class="box3">我是文字我是文字</div>
<hr>
<div class="box4">我是文字我是文字</div>
<hr>
<div class="box5">我是文字我是文字</div>
</body>
</html>
8.外边距
一、！！！css显示模式:块级、行内、行内块级
在HTML中HTML将所有标签分为两类，分别是容器级和文本级
在CSS中CSS也将所有标签分为两类，分别是容器级是块级元素和行内元素
#1、HTML中容器级与文本级
容器级标签：可以嵌套其他的所有标签
div、h、ul>li、ol>li、dl>dt+dd
文本级标签：只能嵌套文字、图片、超链接
span、p、buis、strong、em、ins、del
#2、CSS中块级与行内
块级：块级元素会独占一行，所有的容器类标签都是块级，文本标签中的p标签也是块级
div、h、ul、ol、dl、li、dt、dd 还有标签p
行内：行内元素不会独占一行，所有除了p标签以外的文本标签都是行内
span、buis、strong、em、ins、del
行内块级
img
#3、块级元素与行内元素的区别
1、块级元素block
独占一行
可以设置宽高
若没有设置宽度，那么默认和父元素一样宽（比如下例中的div的父元素是body，默认div的宽就是body的宽）
若没有设置宽高，那么就按照设置的来显示
2、行内元素inline
不会独占一行
不可以设置宽高
盒子宽高默认和内容一样
3、行内块级元素inline-block
不会独占一行
可以设置宽高
二、！！！CSS显示模式转换
可以通过标签的display属性设置显示模式
none HTML 文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用
block 块级
inline 行内
inline-block 行内块级
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*去掉默认外边距.内边距*/
* {
padding: 0;
margin: 0;
}
div {
width: 150px;
height: 150px;
}
/*margin设置外边距*/
.box1 {
border: 1px solid red;
margin-top: 100px;
margin-left: 100px;
margin-bottom: 70px;
/*padding-top: 30px;*/
/*padding-left: 30px;*/
box-sizing: border-box;
}
.box2 {
border: 1px solid green;
margin-top: 60px;
}
/*设置成行内块级
1、外边距的那一部分是没有背景颜色的
2、外边距合并现象
在默认布局的水平方向上，默认两个盒子的外边距会叠加
而在垂直方向上，默认情况下两个盒子的外边距是不会叠加的，会出现合并现象，谁的外边距比较大，就听谁的*/
.box3 {
border: 1px solid blue;
display: inline-block;
margin-right: 50px;
}
.box4 {
border: 1px solid yellow;
display: inline-block;
margin-left: 100px;
}
.box5 {
border: 1px solid grey;
}
/*位于box1的内容嵌套中*/
.boxx {
width: 20px;
height: 20px;
background-color: red;
/*margin-top: 30px;*/
/*margin-left: 30px;*/
}
</style>
</head>
<body>
<div class="box1">
1111
<div class="boxx"></div>
</div>
<div class="box2">
22222
</div>
<div class="box3">
333
</div>
<div class="box4">
4444
</div>
<div class="box5">
5555
</div>
</body>
</html>
9.盒子居中及内容居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 200px;
height: 600px;
background-color: red;
/*设置行高和内边距让文本居中*/
text-align: center;
line-height: 25px;
padding-top: 250px;
padding-bottom: 250px;
/*自动减小padding填充的*/
box-sizing: border-box;
/*盒子相对于父元素水平居中*/
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box1">
你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊
</div>
</body>
</html>
10.文字溢出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 200px;
height: 200px;
background: red;
word-break: break-all;
}
.box2 {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
fadfkadjsfkljdddddddkaldfja;ldsfjdkl;ajfkl;djfkadlksfjdklfjadklfjadslk
</div>
<hr>
<div class="box2">fasdkffadsfasdfasdfasdfdasfadsfddsjf</div>
</body>
</html>
CSS-part1的更多相关文章
- 前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...
- 前端学习笔记之CSS选择器
阅读目录 一 基本选择器 二 后代选择器.子元素选择器 三 兄弟选择器 四 交集选择器与并集选择器 五 序列选择器 六 属性选择器 七 伪类选择器 八 伪元素选择器 九 CSS三大特性 一 基本选择器 ...
- CSS Sprites技术原理和使用
在分析各个网站的CSS时,我们经常可以看到一些网站有很多的元素共享了一张背景图片,而这张背景图片包含了所有这些元素需要的背景,这种技术就叫做CSS Sprites. 淘宝的css sprites ...
- （绝对官方好用，快速上手）针对grunt之前写的那篇有些乱，这次总结个清晰的
安装 Grunt基于Node.js,安装之前要先安装Node.js,然后运行下面的命令. sudo npm install grunt-cli -g grunt-cli表示安装的是grunt的命令行界 ...
- Grunt ：任务自动管理工具
来自<JavaScript 标准参考教程(alpha)>,by 阮一峰 在Javascript的开发过程中,经常会遇到一些重复性的任务,比如合并文件.压缩代码.检查语法错误.将Sass代码 ...
- 转：Grunt：任务自动管理工具
Grunt:任务自动管理工具 来自<JavaScript 标准参考教程(alpha)>,by 阮一峰 目录 安装 命令脚本文件Gruntfile.js Gruntfile.js实例:gru ...
- python爬虫scrapy之scrapy终端(Scrapy shell)
Scrapy终端是一个交互终端,供您在未启动spider的情况下尝试及调试您的爬取代码. 其本意是用来测试提取数据的代码,不过您可以将其作为正常的Python终端,在上面测试任何的Python代码. ...
- Grunt：任务自动管理工具（收藏+转载）
原文:http://javascript.ruanyifeng.com/tool/grunt.html 安装 命令脚本文件Gruntfile.js Gruntfile.js实例:grunt-contr ...
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- HTML CSS + DIV实现整体布局 part1
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
随机推荐
- tsconfig常用配置全解
include, exclude, files配置项 extends配置 compilerOptions下的配置 compilerOptions.allowUnreachableCode compil ...
- Lambda表达式无参数无返回值的练习和Lambda表达式有参数有返回值的练习
题目: 给定一个厨子Cook接口,内容唯一的抽象方法makeFood,且无参数.无返回值.如下: public interface Cook{ void makeFood(); } 在下面的代碼中,使 ...
- kubernetes之DaemonSet以及滚动更新
1.什么是DaemonSet? 1.1DaemonSet是Pod控制器的又一种实现方式,用于在集群中的全部节点上同时运行一份指定的Pod资源副本,后续加入集群的节点也会自动创建一个相关的Pod对象,当 ...
- Odoo14 Error: While parsing modifiers for page: for modifier "invisible": fieldValue.indexOf is not a function
1 Traceback: 2 Error: While parsing modifiers for page: for modifier "invisible": fieldVal ...
- 最近公共祖先（LCA）学习笔记 | P3379 【模板】最近公共祖先（LCA）题解
研究了LCA,写篇笔记记录一下. 讲解使用例题 P3379 [模板]最近公共祖先(LCA). 什么是LCA 最近公共祖先简称 LCA(Lowest Common Ancestor).两个节点的最近公共 ...
- 技术分享|sysbench 压测工具用法浅析
GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 介绍 新业务上线的时候通常需要对数据库性能进行压力测试,以确认是否满足需要,今天简单介绍下sysbench的用法: 1.s ...
- TS入门基础
1,使用node.js 2,配置typescript node i -g typescript 3,创建ts文件 使用tsc + <文件名>在命令行中跑可以跑出一个一样得js文件默认生成的 ...
- BZOJ3262/Luogu3810 陌上花开 (三维偏序,CDQ)
一个下午的光阴之死,凶手是细节与手残. 致命的一枪:BIT存权值时: for(; x <= maxx; x += x&-x) t[x] += w; //for(; x <= n; ...
- MyBatis 04 实战
增删改查实现 在实际使用中,MyBatis 的使用遵从一定的规范. 常用的增删改查的 MyBatis 实现如下: Mapper.xml <?xml version="1.0" ...
- mybatis 13: 一对多关联查询
业务背景 根据客户id查询客户基本信息,以及客户存在的订单信息 两张数据表 客户表 订单表 实体类 客户实体类:Customer private Integer id; private String ...