day33 前端之css
day33 前端之css
css简介
CSS（Cascading Style Sheet，层叠样式表）定义如何显示HTML元素。
# 语法结构
选择器 {
属性名1，属性值
属性名2，属性值
}
# css注释
/*单行注释*/
/*
多行注释
多行注释
*/
/*功能注释注释*/
# css的三种引入方式
1.<style>
h1 {
color:red;
}
2.<link rel="stylesheet" href="mycss.css">
3.<h1 style="color:blue"> hello baby<h1> # 行内式
基本选择器
1.id选择器
2.类选择器
3.标签选择器
4.通用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器*/
#d1 {
color: green;
}
/*类选择器*/
.c1 {
color: green;
}
/*标签选择器*/
span {
color: gray;
}
/* 通用选择器*/
* {
color: red;
}
</style>
</head>
<body>
<div id="d1">div1</div>
<div>div2</div>
<span class="c1">span1</span>
<span class="c2">span2</span>
</body>
</html>
属性选择器
<style>
[username] { # 根据属性查找
color: red;
}
[username='ly'] { # 根据条件查找
color: red;
}
div[username='ly'] { # 可以加div限制
color: red;
}
</style>
</head>
<body>
<div username="ly">div</div>
<span username>span</span>
<p username="ly">p</p>
</body>
组合和嵌套
后代选择器：
/*li内部的a标签设置字体颜色*/
li a {
color: green;
}
# /*逗号表示并列关系*/
#d1, .c1 {
color: red;
}
伪类选择器
<style>
a {
color: gray;
}
# /*鼠标悬浮时候的样式， 掌握主*/
a:hover {
color: red;
}
# /*按住鼠标左键不放松的样式*/
a:active {
color: green;
}
# /*访问之后的样式*/
a:visited {
color: blue;
}
</style>
</head>
<body>
<a href="">点我哦</a>
</body>
伪元素选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:first-letter { # 设置首字母颜色
color: red;
font-size: 24px; # 设置字体大小
}
p:before { # 给字体前面加字，但不能选择加的字
content: 'ly is nb';
font-size: 28px;
color: red;
}
/*解决父标签塌陷问题*/
p:after {
content: 'ly is nb';
font-size: 28px;
color: green;
}
</style>
</head>
<body>
<p>
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，
</p>
</body>
选择器的优先级
选择器优先级
1. 选择器相同的情况
离谁越近就听谁的
2. 选择器不同的情况
行内式 > id选择器 > 类选择器 > 标签选择器
设置长宽
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background: red; # 背景颜色
}
span {
# /*行内元素不能设置宽和高*/
/*width: 100px;*/
/*height: 100px;*/
background: green;
}
</style>
</head>
<body>
<div>div</div>
<span>span</span>
</body>
字体属性
font-size: 20px;
/*颜色的英文名*/
color: limegreen;
/*范围是0-255*/
color: rgb(101,119,120); # rgb颜色设置
/*a的范围是0-1*/
color: rgba(101,119,120, 0.9); # 透明度
/*颜色编号，表示的颜色最多，1600w*/
/*color: #757575;*/ # rgb颜色编号
/*color: red;*/
font-weight: bolder; # 字体加粗
/* 范围是100-900的整数*/
font-weight: 800; # 自定义设置字体粗细
文字属性
p {
text-align: left; # 文字靠左对齐
text-align: center; # 文字居中
text-align: right; # 文字靠右对齐
text-decoration: underline; # 文字加下划线
text-decoration: line-through; # 文字加中划线
text-decoration: overline; # 文字加上划线
font-size: 20px; # 设置文字大小
text-indent: 40px; # 首行缩进
}
a { # 去掉“点我”的下划线
# 重点掌握
text-decoration:none;
}
<a href="">点我</a>
背景属性
<style>
div {
width: 400px;
height: 400px;
background: red; # 背景颜色
background-color: red;
background-image: url("1234.png"); # 导入背景图片的地址
background-repeat: repeat-x; # 设置x轴不重复
background-repeat: repeat-y; # 设置y轴不重复
background-repeat: no-repeat; # 设置不重复
background-position: center center; # 设置图片居中
background-position: 20px 50px; # 移动图片
/*只要前缀一样的情况，都可以简写*/
background: no-repeat center center url("1234.png"); #这行就表示上面一串了
border: 3px solid red;
}
</style>
边框
简写的：
border-radius: 50% # 把正方形变成一个圆形:
border: 3px solid red; # 简写代表上面一串代码
边框样式：
1.none：无边框
2.dotted：点状虚线边框
3.dashed：矩形虚线边框
4.solid：实线边框
p {
border: 1px solid red;
border-width: 3px;
border-style: dotted;
border-color: red;
border-left-color: red; # 设置左边边框
border-left-style: solid; # 设置边框实心
border-left-width: 10px; # 设置边框的粗细
border-top-color: green; # 设置边框上边
border-top-style: dotted;
border-top-width: 5px;
border-right-color: green; # 设置右边
border-right-style: dotted;
border-right-width: 5px;
border-bottom-color: green; # 设置上面
border-bottom-style: dotted;
border-bottom-width: 5px;
border: 3px solid red; # 简写代表上面一串代码
}
div {
width: 200px;
height: 200px; # 成一个正方形
background: red;
border-radius: 100px; # 把四个角往里面缩成一个圆形
border-bottom-left-radius: 100px; # 左下方缩角
border-bottom-right-radius: 100px; # 右下方缩角
border-radius: 50%; # 简写，直接成圆角
}
</style>
display属性
隐藏两种方式：
1.display: block;隐藏之后，被隐藏的位置还在
2.display: none;隐藏之后，被隐藏的位置不在
#d1 {
width: 100px;
height: 100px; # 需求是两个块级元素在一行
background: red;
display: inline-block; # 块级元素和行内元素都具备
}
#d2 {
width: 100px;
height: 100px;
background: green;
display: inline-block; # 块级元素和行内元素都具备
}
#d3 { # 需求是把两个行内元素放在两行
width: 100px;
height: 100px;
display: block; # 把行内元素设置为块级元素
background: red;
}
#d4 {
width: 100px;
height: 100px;
display: block; # 把行内元素设置为块级元素
background: green;
}
#d5 {
width: 100px;
height: 100px;
/*隐藏*/
display: none; # 用来隐藏之后，被隐藏的位置不在
background: red;
}
#d6 {
width: 100px;
height: 100px;
display: block; # 用来隐藏之后，被隐藏的位置还在
background: green;
}
</style>
css盒子模型
盒子属性：
1.margin:用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
2.padding:用于控制内容与边框之间的距离；
3.Border(边框):围绕在内边距和内容外的边框。
4.Content(内容):盒子的内容，显示文本和图像。
外边距简写：margin: 5px 10px 15px 20px;
顺序：上、右、下、左
居中：margin: 0 auto;
内填充：padding: 5px 10px 15px 20px;
# 第一个值代表上下，第二个代表左右
margin:10px 20px;
# 第一个值代表上，第二个代表左右,第三个代表下
margin:10px 20px 30px;
# 上 右 下 左
margin:10px 20px 30px 40px;
# 面试题：盒子和盒子之间margin取最大的值，它们是不叠加的。
#d1 {
width: 100px;
height: 100px;
background: red;
margin-bottom: 20px;
}
#d2 {
width: 100px;
height: 100px;
background: green;
margin-top: 50px;
}
# 在盒子水平居中
#d1 {
width: 200px;
height: 200px;
border: 3px solid red;
}
p {
width: 20px;
height: 20px;
background: green;
/*margin-left: 90px;*/
/*水平居中*/
margin: 0 auto; # 水平居中
}
浮动
float（浮动）：
在 CSS 中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。
关于浮动的两个特点：
1.浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
2.由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
三种取值：
1.left：向左浮动
2.right：向右浮动
3.none：默认值，不浮动
clear属性规定元素的哪一侧不允许其他浮动元素：
1.left：在左侧不允许浮动元素。
2.right：在右侧不允许浮动元素。
3.both：在左右两侧均不允许浮动元素。
4.none：默认值。允许浮动元素出现在两侧。
5.inherit：规定应该从父元素继承 clear 属性的值。
<style>
#d1 {
width: 100px;
height: 100px;
background: green;
float: left; # 让背景颜色浮动
}
#d2 {
width: 110px;
height: 110px;
background: red;
/*float: left;*/
}
</style>
浮动带来的塌陷问题
<style>
#d1 {
border: 3px solid blue;
}
#d2 {
width: 100px;
height: 100px;
background: green;
float: left;
}
#d3 {
width: 100px;
height: 100px;
background: red;
float: left;
}
/*#d4 {*/
/* !*height: 100px;*!*/
/* !*清除浮动*!*/ # 不让左边出现浮动的盒子
/* clear: left;*/
/*}*/
# 谁塌陷给给加clearfix:after（通用解决方式）
.clearfix:after { # 伪元素选择器
content: '';
display: block; # 改为块级元素
clear: both;
}
</style>
overflow溢出属性
溢出属性：
1.visible:默认值。内容不会被修剪，会呈现在元素框之外。
2.hidden:内容会被修剪，并且其余内容是不可见的。
3.scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4.auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5.inherit:规定应该从父元素继承 overflow 属性的值。
代码：文本溢出
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
width: 100px;
height: 100px;
border: 3px solid red;
/*overflow: hidden;*/ # 设置内容会被修剪
overflow: scroll; # 设置滚动条属性
}
</style>
</head>
<body>
<p>由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。</p>
</body>
溢出的案例
圆形头像：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background: #4e4e4e; # 设置背景颜色
}
#d1 {
width: 100px;
height: 100px;
border: 3px solid white; # 设置一个框
border-radius: 50%;
margin: 0 auto;
overflow: hidden;
}
#d1 img {
width: 100%; # 设置图片的宽度100%
}
</style>
</head>
<body>
<div id="d1">
<img src="1234.png" alt="">
定位
1.relative（相对定位）：relative的一个主要用法：方便绝对定位元素找到参照物。
2.absolute（绝对定位）：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。
3.fixed（固定）：fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
<style>
#d1 {
width: 100px;
height: 100px;
background: red;
/*默认值，不能移动位置*/
/*position: static;*/
/*相对定位了， 只要改为relative， 那么就算你位置不发生移动，标签的性质也已经发生了改变
有不能移动位置改为可以移动位置
*/
position: relative; # 相对定位
left: 100px;
top: 100px;
#d2 {
width: 100px;
height: 100px;
background: red;
position: relative;
margin-left: 100px; # 绝对定位的父类
}
#d3 {
width: 100px;
height: 100px;
background: green;
position: absolute; # 绝对定位
left: 100px;
top: 100px;
}
#d4 {
width: 50px;
height: 200px;
background: red;
/*固定定位*/
position: fixed; # 固定定位
right: 20px;
bottom: 100px;
}
</style>
opacity
opacity:用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
color: red;
opacity: 0.2; # 设置透明的效果
}
</style>
</head>
day33 前端之css的更多相关文章
- 前端开发css实战：使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- 前端之css
前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- 第二篇：web之前端之css
前端之css 前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式 ...
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- 前端基础——css
前端基础——css css的内容主要包括:盒子模型.定位.单位与取值.属性.选择器.
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
随机推荐
- 使用vsftpd 搭建ftp服务
ftp 基础服务器基础知识 ftp有三种登录方式.匿名登录(所有用户).本地用户.虚拟用户(guest). FTP工作模式 主动模式:服务端从20端口主动向客户端发起链接. 控制端口21:数据传输端口 ...
- Java安全之Thymeleaf SSTI分析
Java安全之Thymeleaf SSTI分析 写在前面 文章首发:https://www.anquanke.com/post/id/254519 最近看了一遍Thymeleaf,借此机会学习一下Th ...
- OpenYurt 与 FabEdge 集成验证——云边数据面通信初试
作者|浙江大学 SEL 实验室:晋晨.博云:耿浩涛 审核&校对:海珠 编辑&排版:雯燕 背景 在近几年的产业环境下,传统云计算能力已无法支撑起规模日趋庞大且异地分散的数据处理与计算需求 ...
- elasitcsearch单机版安装
1.下载压缩包 https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-6.6.2.tar.gz 2.解压修改配置文件 c ...
- TLFS 内存分配算法详解
文章目录 1. DSA 背景介绍 1.1 mmheap 1.2 mmblk 2. TLFS 原理 2.1 存储结构 2.2 内存池初始化 2.3 free 2.4 malloc 参考资料 1. DSA ...
- JDK 工具 HSDB 查看动态生成类
前置工作 1. 复制 JDK 安装目录\jre\bin\sawindbg.dll 到 JDK 安装目录同级的 jre\bin 目录下,否则会报错找不到 sawindbg.dll 文件. 比如我的 sa ...
- 1组-Alpha冲刺-5/6
一.基本情况 队名:震震带着六菜鸟 组长博客:https://www.cnblogs.com/Klein-Wang/p/15564206.html 小组人数:7人 二.冲刺概况汇报 王业震 过去两天完 ...
- 菜鸡的Java笔记 图书馆
图书大厦 开发要求 现在要求模拟一个图书大厦图书管理的程序结构,可以在图书大厦实现某一类图书的上架操作,下架操作,以及关键字模糊查询的操作 注 ...
- 14-1-Unsupervised Learning ---dimension reduction
无监督学习(Unsupervised Learning)可以分为两种: 化繁为简 聚类(Clustering) 降维(Dimension Reduction) 无中生有(Generation) 所谓的 ...
- 04373 C++程序设计 2019版 第一章习题五、程序设计题
题目: 1.编写一个程序,将从键盘输入的n个字符串保存在一个一维数组A中.在输入字符串之前,先输入n的值.要求,数组A需要动态申请空间,程序运行结束前再释放掉. #include <iostre ...