前端学习之路CSS基础学习二
CSS属性相关
样式操作：
（1）width:为元素设置宽度
（2）height:为元素设置高度
ps:块儿级标签才能设置长宽行内标签设置长宽没有任何影响
p{
width: 30px;
height: 30px;
}
文字操作
/*字体样式： 关键字：font-family 作用：更改字体的样式*/
{
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
} /*字体大小: 关键字：font-size 作用：更改用户的字体大小*/
p{
font-size: 30px;
} /*文字颜色: 关键字：color 作用：更改样式的颜色*/
{
/*方式一*/
/*color: red;*/ /*方式二*/
/* color: rgb(255,255,255);*/ /*方式三*/
color: #ff0000;
} /*文字装饰 关键字：text-decoration 作用：对文字进行装饰*/
{
/* 文字下面没有任何装饰 适用于超链接 超链接下没有任何横线*/
text-decoration: none;
/* 下划线*/
text-decoration: underline;
/* 上划线*/
text-decoration: overline;
/*穿过文字 有点类似于删除*/
text-decoration: line-through;
} /*文字对齐 关键字：text-aline 作用：调解文字位置*/
/*居中*/
text-align: center;
/*左对齐 默认*/
text-align: left;
/*右对齐*/
text-align: right;
/*两端对齐*/
text-align:justify /*字重: 关键字：font-weight 作用：对字体加重或者减轻*/
{
/*加重*/
font-weight: bolder; /*减轻*/
font-weight: lighter;
} /*）文字缩进 关键字：text-indent 作用：文本进行缩进*/
{
text-indent:32px ;
}
背景属性
（1）关键字：background
（2）作用：对背景进行操作
{
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url("111.png");
/*默认铺满整个屏幕*/
background-repeat:repeat ;
/*禁止背景重复*/
background-repeat: no-repeat;
/*水平方向重复*/
background-repeat: repeat-x;
/*垂直方向重复*/
background-repeat: repeat-y;
/*背景位置*/
background-position: center;
}
使被装饰的属性固定不动
关键字：background-attachment: fixed;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>滚动背景图示例</title>
<style>
* {
margin:;
}
.box {
width: 100%;
height: 500px;
background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg") center center;
background-attachment: fixed;
}
.d1 {
height: 500px;
background-color: tomato;
}
.d2 {
height: 500px;
background-color: steelblue;
}
.d3 {
height: 500px;
background-color: mediumorchid;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="box"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>
图片样式不动
支持简写
backgroud:red url('') no-repeat center center 背景图片应用场景
所有浏览器你能够看到的都是走网路请求传输过来的
当你的网站需要用到很多小图标的时候，可以将所有的小图片放在一张
图片上，然后通过背景图片的位置来控制显示哪一个小图片从而节省加载资源
边框
关键字：border
作用：给被装饰的对象加上边框
（1）边框属性
1、border-width:边框粗细
2、border-color：边框颜色
3、border-style：边框样式
（2）边框样式
/*颜色、粗细、样式*/
{
/*边框颜色*/
border-color: blue;
/*边框粗细*/
border-width: 3px;
/*边框样式*/
border-style: dashed;
}
/*单独为某一个边框设置样式*/
{
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
}
/*（3）border-radius： 作用： （1）可以使边框变的圆滑 （2）设置宽高为边框的一半 可以设置成一个圆*/
{
width: 100px;
height: 100px;
border: 3px solid black;
background-color: red;
/*设置为边框的一半*/
border-radius: 50%;
}
display属性
/*（1）none：
①元素存在 但是在浏览器中不存在
②浏览器中的空间也不存在*/
{
display: none;
} /*（2）bolck：将行内标签转换成块标签 可以设置行内标签的一些属性值*/
{
width: 100px;
height: 100px;
border: 3px solid red;
/*将行内标签 转换成块标签*/
display: block;
} /*（3）inline：将块级元素 按行内元素显示*/
.c1{
width: 100px;
height: 100px;
border: 3px solid red;
/*将块标签 转换成行标签*/
display: inline;
}
.c2{
width: 100px;
height: 100px;
border: 3px solid blue;
/*将块标签转换成行标签*/
display: inline;
}
.c3{
/*同时拥有行内标签以及块标签的特点*/
display: inline-block;
}
display:"none"与visibility:hidden的区别：
（1）visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
（2）display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
盒子模型
（1）margin：控制标签与标签的距离
（2）border：内边距与内容外的边框
（3）padding：内部文本到边框的距离
（4）content：内部文本的边框
（1）marg外边距
.margin-test {
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
}
/*简写*/
margin: 5px 10px 15px 20px;
顺序：边框顺时针（上右下左）
（2）内填充：
.padding-test {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
补充padding的常用简写方式：
（1）提供一个，用于四边；
（2）提供两个，第一个是上下，第二个是左右
（3）如果是三个参数，第一个上，第二个是左右，第三个是下
（4）四个参数，上右下左
float浮动
【1】基本概念
①、在CSS样式中任何元素都可以浮动
②、浮动之后会生成一个块级框 不论其本身是何种元素
【2】浮动的特点：
①、浮动的边框可以向左或者向右移动 如果碰到另外一个边框会立马停止浮动
②、浮动的文本不在普通的文档流中
【3】取值方式
①、left：左浮动
②、right：右浮动
③、none：没有浮动
（浮动会出现父标签塌陷的问题，为了解决这个问题我们会用到clear）
【4】clear
作用：清除浮动带来的影响
.clearfix:after{
content:''
display:block;
clear:both
}
/*哪里塌陷 就给谁加一个clearfix类属性即可
如果给当前标签加没有效果 那么你可以考虑给目标标签外层
再套一个div 然后给这个新的div加*/
overflow溢出属性
（1）属性：
①、visible：默认属性溢出的属性不会被修剪
②、hidden：内容会被修剪 并且溢出内容不可见
③、scroll：溢出的内容会被修剪 但是浏览器会以滚轮的形式 查看溢出的部分
④、auto：如果内容被修剪 浏览器会以滚动条查看修剪的内容
（2）方式设置：
①、overflow：水平垂直方向均设置
②、overflow-x：水平方向设置
③、overflow-y：垂直方向设置
圆形头像设置
* {
margin:;
padding:;
background-color: #eeeeee;
}
.header-img {
width: 150px;
height: 150px;
border: 3px solid white;
border-radius: 50%;
overflow: hidden;
}
.header-img>img {
/*width: 100%;*/ /*左右拉伸*/
height: 100%; /*上下拉伸*/
}
定位
（1）relative（相对定位）：相当于自己当前的标签
（2）absolute（绝对定位）：相对于已经定位的父标签
（3）fixe（固定定位）：相对于浏览器窗口 固定在某个位置
脱离文档流和不脱离文档流
（1）：脱离文档流
①、浮动元素脱离文档流
②、绝对定位脱离文档流
③、固定定位脱离文档流
（2）：不脱离文档流
相对定位不脱离文档流
模态框
关键字：z-index
作用：设置对象的层叠顺序
- z-index 值表示谁压着谁，数值大的压盖住数值小的，
- 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
- 从父现象：父亲怂了，儿子再牛逼也没用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>自定义模态框</title>
<style>
.cover {
background-color: rgba(0,0,0,0.65);
position: fixed;
top:;
right:;
bottom:;
left:;
z-index:;
} .modal {
background-color: white;
position: fixed;
width: 600px;
height: 400px;
left: 50%;
top: 50%;
margin: -200px 0 0 -300px;
z-index:;
}
</style>
</head>
<body> <div class="cover"></div>
<div class="modal"></div>
</body>
</html> 自定义模态框示例 模态框
八：opacity
（1）用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。
（2）其不但能透明文本效果 也可以透明图片效果
前端学习之路CSS基础学习二的更多相关文章
- 前端学习之路CSS基础学习一
CSS CSS定义如何显示HTML元素,当浏览器读到一个样式表,它就按照这个样式表来对文档进行格式化. CSS实例 每个CSS样式由两个组成部分:选择器和声明.声明又包括包括属性和属性值.每个声明之后 ...
- 前端学习之路-CSS介绍，Html介绍，JavaScript介绍
CSS介绍 学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式 利用标签中的style属性来改变显示样式 & ...
- python学习之路-day2-pyth基础2
一. 模块初识 Python的强大之处在于他有非常丰富和强大的标准库和第三方库,第三方库存放位置:site-packages sys模块简介 导入模块 import sys 3 sys模 ...
- Python学习之路-Day1-Python基础
学习python的过程: 在茫茫的编程语言中我选择了python,因为感觉python很强大,能用到很多领域.我自己也学过一些编程语言,比如:C,java,php,html,css等.但是我感觉自己都 ...
- HTML&CSS基础学习笔记—创建列表
创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...
- Python学习之路-Day2-Python基础2
Python学习之路第二天 学习内容: 1.模块初识 2.pyc是什么 3.python数据类型 4.数据运算 5.bytes/str之别 6.列表 7.元组 8.字典 9.字符串常用操作 1.模块初 ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...
- 从零开始学习前端开发 — 2、CSS基础
一.CSS简介 1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成 ...
- Web学习篇之---css基础知识（一）
css基础知识(一) 1.css样式: 载入css样式有下面四种: 1).外部样式 2).内部样式 3).行内样式 4).导入样式 <link href="layout.css&quo ...
随机推荐
- ubuntu19.10安装cuda-10.1
ubuntu19.10安装cuda-10.1 1.安装N卡驱动: 打开ubuntu的软件和更新,设置N卡驱动 2.查看ubuntu显卡驱动 nvidia-smi 显示: Sun Feb 23 06:4 ...
- Python筛法求素数
l=[2]m,n=input().split()m=int(m)n=int(n) for i in range(m,n): flag=True for j in l: if i%j==0:#如果当前值 ...
- IntelliJ IDEA2018.2.7安装和破解教程
一.安装 IntelliJ IDEA2018.2.7 IDEA官网下载地址链接:https://www.jetbrains.com/idea/download/previous.html 1.进入网站 ...
- 计量经济与时间序列_滞后算子和超前算子L的定义
1. 为了使计算简单,引入滞后算子的概念: 2. 定义LYt = Yt-1 , L2Yt = Yt-2,... , LsYt = Yt-s. 3. 也就是把每一期具体滞后哪一期的k提到L的 ...
- 笔记本安装SSD固态硬盘详细的优化设置
现在好多笔记本.台式机都加上固态硬盘了,固态硬盘的优势大家应该都有所了解了,在此略写一下固态硬盘优势: 1.启动快,没有电机加速旋转的过程: 2.不用磁头,快速随机读取,读延迟极小: 3.相对固 ...
- Eova 怎么放在 Docker中，使用阿里云流水线构建Eova！！
Eova 快速开发框架不做过多解释,使用起来超级爽提高了我们的开发效率. 有要了解的可以去官网看下http://www.eova.cn/ 最近我们想在docker中运行并且使用阿里云的云效工具去构建部 ...
- layui子弹框调用父弹框方法
var thisFrame = parent.window.document.getElementById("LAY_layuiStampDuty1").getElementsBy ...
- StartDT AI Lab | 视觉智能引擎之算法模型加速
通过StartDT AI Lab专栏之前多篇文章叙述,相信大家已经对计算机视觉技术及人工智能算法在奇点云AIOT战略中的支撑作用有了很好的理解.同样,这种业务牵引,技术覆盖的模式也收获了市场的良好反响 ...
- 吴裕雄--天生自然python学习笔记：python 用 Tesseract 识别验证码
用 Selenium 包实现网页自动化操作的案例中,发现很多网页都因 需输入图形验证码而导致实验无法进行 . 解决的办法就是对验证码进行识别 . 识 别的方法之 一 是通过图形处理包将验证码的大部分背 ...
- 安装php7.2
1,yum源默认的版本太低了,手动安装有一些麻烦,所以可以采用yum的方式进行安装. 2,检查当前安装的PHP包yum list installed | grep php 如果有安装的PHP包,先删除 ...