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 #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
随机推荐
- 一、spring 环境搭建
一.springtoolSuite4下载 1.概述 Spring Tools 4 是适用于您最喜欢的编码环境的下一代 Spring 工具.它主要从头开始重建,为开发基于 Spring 的企业应用程序提 ...
- robot framework error: [ ERROR ] Suite 'XXX' contains no tests or tasks.(解决方法)
robot framework 按照如下操作创建项目 一.创建项目 选择菜单栏file----->new Project Name 输入项目名称. Type 选择Directory. 二.创建测 ...
- 论文解读（DeepWalk）《DeepWalk: Online Learning of Social Representations》
一.基本信息 论文题目:<DeepWalk: Online Learning of Social Representations>发表时间: KDD 2014论文作者: Bryan P ...
- layui 如果调用 from 内嵌入的 iframe子页面方法
(人笨,占时想法的办法,不要骂,不要骂,怕了怕了,想到别的会来改的) 父页面; <%@ page language="java" contentType="text ...
- Python 爬取 煎蛋
这个我是拿来参考的 import requests def url_open(url): response = requests.get(url) html = response.content re ...
- [atARC113F]Social Distance
(由于是实数范围,端点足够小,因此区间都使用中括号,且符号取等号) 定义$P(X)$表示$\forall 2\le i\le n,a_{i}-a_{i-1}\ge X$的概率,那么我们所求的也就是$P ...
- [atARC083F]Collecting Balls
考虑一个构造,对于坐标$(x,y)$,连一条$x$到$y$的边(注意:横坐标和纵坐标即使权值相同也是不同的点),之后每一个连通块独立,考虑一个连通块内部: 每一个点意味着一次删除操作,每一个边意味着一 ...
- C++构造函数写法
笔记 class complex{ public: complex (double r = 0, double i = 0) : re(r), im(i) {} private: double re, ...
- 【2020五校联考NOIP #6】最佳观影
题意: 给出一个 \(k \times k\) 的网格和 \(n\) 次操作.其中 \(k\) 为奇数. 每次操作给出一个数 \(m\).每次你要找出一个三元组 \((x,l,r)\) 使得: \(r ...
- 洛谷 P3647 [APIO2014]连珠线（换根 dp）
题面传送门 题意: 桌子上有 \(1\) 个珠子,你要进行 \(n-1\) 次操作,每次操作有以下两种类型: 拿出一个新珠子,并选择一个桌子上的珠子,在它们之间连一条红线 选择两个由红线相连的珠子 \ ...