CSS样式操作

给字体设置长宽

只有块级标签才可以设置长宽

行内标签设置了没有任何作用(仅仅只取决于内部文本值)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Yeah</title>
<style> div {
width: 200px;
height: 100px;
}
span {
width: 500px;
height: 400px;
} </style> </head>
<body>
<div>
div
</div>
<span>span</span> </body>
</html>

字体颜色

color后面可以跟多种颜色数据

  • 颜色英文:red
  • rgb(1,1,1):可以利用截图软件获取三基色数字,数字范围只能是0~255
  • 直接使用 pycharm 提供的取色器
  • rgba(128,128,128,0.4):最后一个数字可以调节颜色的透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>YEAH</title>
<style>
p {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
font-size: 48px;
font-weight: lighter;
/*color: red;*/
/*color: rgb(156,59,24);*/
/*color: #c3ff69;*/
color: rgba(61,94,86,0.7);
} </style> </head>
<body> <p>
鹅鹅鹅,曲项向天歌。
</p> </body>
</html>

语义

a {

text-decoration: none;

}

取消a标签默认的下划线

背景图片

默认是铺满整个区域

通常一个页面上的一个个小图标,并不是单独的,而是通过一个非常大的图片,该图片上有网址所用到所有的小图标。

通过控制背景图片的位置,来显示不同的图标样式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>YEAH</title>
<style>
#d1 {
height: 800px;
background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573737709470&di=3763ef1067405bd66e3c372343454bc6&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201608%2F24%2F20160824232248_PdVQU.jpeg");
background-attachment: fixed;
} </style> </head>
<body>
<div style="height: 600px;background-color: red"></div>
<div style="height: 600px;background-color: blue"></div>
<div id="d1"></div>
<div style="height: 600px;background-color: greenyellow"></div>
</body>
</html>

边框

后面跟三个参数

颜色,字体,样式

可以单独设置:样式,颜色,粗细

border-top-style:dotted;

border-top-color:red;

border-right-style:solid;

border-bottom-style:dotted;

border-left-style:none;

可以单独设置某一边的样式

border-top: 3px solid red;

border-left: 1px dotted green;

border-right: 5px dashed blue;

border-bottom: 10px solid pink;

也可以简写统一设置

display

inline 将块级标签变成行内标签

block 能够将行内标签设置成长宽和独占一行

inline-block 即可以设置长度,也可以在一行展示

display:none 隐藏标签,并且标签原来占的位置也消失了

visibility:hidden 隐藏标签,但是标签原来的位置还在

盒子模型

以快递盒为例

1.两个快递盒之间的距离(标签与标签之间的距离)

2.快递盒盒子的厚度(边框border)

3.快递盒中的物品距离内边框的距离(内部文本与内边框之间的距离)

4.物品的大小(文本大小)

margin: 10px; 只写一个参数,上下左右全是

margin: 10px 20px; 第一个控制的是上下,第二个则是左右

margin: 10px 20px 30px; 第一个控制的是上,第二个是左右。第三个是下

margin: 10px 20px 30px 40px; 第一个控制的是上,第二个是右,第三个是下,第四个是左

margin:0 auto; 左右居中,不能上下居中

浮动(**************)

float

CSS中,任何元素都可以浮动。

浮动的元素,是脱离正常的文档流(原来的位置会空出来)

浏览器会优先展示文本内容(**********)

浮动带来的影响

会造成父标签塌陷

clear

可清除浮动带来的影响

.clearfix:after {
content: '';
clear: both; /*左右两边都不能有浮动的元素*/
display: block;
}
哪一个父标签塌陷了,就给它加clearfix这个类属性值

overflow溢出属性

visible 默认值。内容不会被修改,会呈现在元素框之外

hidden 内容会被修剪,并且其余内容是不可见的

scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容

inherit 规定应该从父元素继承 overflow属性的值

定位

所有的标签默认都是静态的,无法改变位置

position: static;

必须将静态的状态修改成定位之后

相对定位(了解) relative

​ 相对于标签原来的位置,移动

绝对定位(购物车) absolute

​ 相对于已经定位过(只要不是static都可以 relative)的父标签,再做定位(**************)

固定定位(回到顶部) fixed

​ 相对于浏览器窗口,固定在某个位置不动

位置的辩护是否脱离文档流

1.不脱离文档流

​ 相对定位

2.脱离文档流

​ 浮动的元素

​ 绝对定位

opacity

既可以调颜色,也可以调字体

day 46的更多相关文章

  1. 《Entity Framework 6 Recipes》中文翻译系列 (46) ------ 第八章 POCO之领域对象测试和仓储测试

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 8-8  测试领域对象 问题 你想为领域对象创建单元测试. 这主要用于,测试特定的数 ...

  2. 每天一个linux命令(46):vmstat命令

    vmstat是Virtual Meomory Statistics(虚拟内存统计)的缩写,可对操作系统的虚拟内存.进程.CPU活动进行监控.他是对系统的整体情况进行统计,不足之处是无法对某个进程进行深 ...

  3. 1Z0-053 争议题目解析46

    1Z0-053 争议题目解析46 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 46.What happens when you run the SQL Tuning Adviso ...

  4. mysql 5.0.46安装配置

    http://os.chinaunix.net/a2008/0801/986/000000986346.shtml RPM包和源码包存放位置 /usr/local/src 源码包编译安装位置(pref ...

  5. LeetCode - 46. Permutations

    46. Permutations Problem's Link -------------------------------------------------------------------- ...

  6. LeetCode39/40/22/77/17/401/78/51/46/47/79 11道回溯题(Backtracking)

    LeetCode 39 class Solution { public: void dfs(int dep, int maxDep, vector<int>& cand, int ...

  7. 分享Kali Linux 2016.2第46周虚拟机

    分享Kali Linux 2016.2第46周虚拟机该虚拟机使用Kali Linux 2016.2第46周的64位镜像安装.桌面为Gnome模式.该虚拟机配置如下:(1)支持VMWare 9以上的版本 ...

  8. 分享Kali Linux 2016.2第46周镜像文件

    分享Kali Linux 2016.2第46周镜像文件Kali Linux官网在11月13日发布Kali Linux 2016.2的第46周镜像文件.这次还是保持以往的规模,总共提供了11个镜像文件. ...

  9. Search Ads 已经在美国区上线 - iOS 移动开发周报(46)

    Search Ads 已经在美国区上线 - iOS 移动开发周报(46) 新闻 Search Ads 上线 苹果的 AppStore 搜索广告终于 正式上线了 https://developer.ap ...

  10. cocos2dx常见的46中+22中动作详解

    cocos2dx常见的46中+22中动作详解 分类: iOS2013-10-16 00:44 1429人阅读 评论(0) 收藏 举报 bool HelloWorld::init(){    ///// ...

随机推荐

  1. MyBatis 使用 foreach 批量插入

    MyBatis 使用 foreach 批量插入 参考博文 老司机学习MyBatis之动态SQL使用foreach在MySQL中批量插入 使用MyBatis一次性插入多条数据时候可以使用 <for ...

  2. JavaScript中的回调函数(callback)

    什么是回调函数 In computer programming, a callback is a piece of executable code that is passed as an argum ...

  3. eclipse中查找类、方法及变量被引用的地方

    1.选中要查看的类.方法或变量,然后Ctrl+Shift+G或右键-->References--->Project,就可以找到它所有被引用的地方. 2.对于方法,还可以通过右键--> ...

  4. C++对象布局

    <C++应用程序性能优化><深度探索C++对象模型>笔记 #include<iostream> using namespace std; class student ...

  5. 【转】jsp 页面 按回车键 触发事件

    转载: https://blog.csdn.net/ludongshun2016/article/details/59536779. 第一种: <script type="text/J ...

  6. Vue实际中的应用开发【分页效果与购物车】

    作者 | Jeskson 来源 | 达达前端小酒馆 分页组件 首先来创建项目: 分页组件,做项目不要写动手写代码,要想想业务逻辑,怎么写,如何写才是最好的呈现方式,做项目不急,要先想好整体的框架,从底 ...

  7. [LeetCode] 884. Uncommon Words from Two Sentences 两个句子中不相同的单词

    We are given two sentences A and B.  (A sentence is a string of space separated words.  Each word co ...

  8. Elasticsearch由浅入深(十一)内核原理

    倒排索引组成结构以及索引不可变原因 对于倒排索引是非常适合用来进行搜索的它的结构:(1)包含这个关键词的document list(2)包含这个关键词的所有document的数量:IDF(invers ...

  9. java常量池-字符串常量池、class常量池和运行时常量池

    原文链接:http://tangxman.github.io/2015/07/27/the-difference-of-java-string-pool/ 在java的内存分配中,经常听到很多关于常量 ...

  10. Loj #3045. 「ZJOI2019」开关

    Loj #3045. 「ZJOI2019」开关 题目描述 九条可怜是一个贪玩的女孩子. 这天,她和她的好朋友法海哥哥去玩密室逃脱.在他们面前的是 \(n\) 个开关,开始每个开关都是关闭的状态.要通过 ...