CSS样式操作

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的更多相关文章

《Entity Framework 6 Recipes》中文翻译系列 (46) ------ 第八章 POCO之领域对象测试和仓储测试
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 8-8 测试领域对象问题你想为领域对象创建单元测试. 这主要用于,测试特定的数 ...
每天一个linux命令（46）：vmstat命令
vmstat是Virtual Meomory Statistics(虚拟内存统计)的缩写,可对操作系统的虚拟内存.进程.CPU活动进行监控.他是对系统的整体情况进行统计,不足之处是无法对某个进程进行深 ...
1Z0-053 争议题目解析46
1Z0-053 争议题目解析46 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 46.What happens when you run the SQL Tuning Adviso ...
mysql 5.0.46安装配置
http://os.chinaunix.net/a2008/0801/986/000000986346.shtml RPM包和源码包存放位置 /usr/local/src 源码包编译安装位置(pref ...
LeetCode - 46. Permutations
46. Permutations Problem's Link -------------------------------------------------------------------- ...
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 ...
分享Kali Linux 2016.2第46周虚拟机
分享Kali Linux 2016.2第46周虚拟机该虚拟机使用Kali Linux 2016.2第46周的64位镜像安装.桌面为Gnome模式.该虚拟机配置如下:(1)支持VMWare 9以上的版本 ...
分享Kali Linux 2016.2第46周镜像文件
分享Kali Linux 2016.2第46周镜像文件Kali Linux官网在11月13日发布Kali Linux 2016.2的第46周镜像文件.这次还是保持以往的规模,总共提供了11个镜像文件. ...
Search Ads 已经在美国区上线 - iOS 移动开发周报（46）
Search Ads 已经在美国区上线 - iOS 移动开发周报(46) 新闻 Search Ads 上线苹果的 AppStore 搜索广告终于正式上线了 https://developer.ap ...
cocos2dx常见的46中+22中动作详解
cocos2dx常见的46中+22中动作详解分类: iOS2013-10-16 00:44 1429人阅读评论(0) 收藏举报 bool HelloWorld::init(){ ///// ...

随机推荐

忍者钩爪 ( ninja) 题解———2019.10.19
可以到这里测..嘿嘿嘿题目: [问题描述 ] 小 Q 是一名酷爱钩爪的忍者, 最喜欢飞檐走壁的感觉, 有一天小 Q 发现一个练习使用钩爪的好地方,决定在这里大显身手. 场景的天花板可以被描述为一 ...
AOP小记
编程思想演进:POP(Procedure Oriented Programming)-> OOP(Object Oriented Programming)-> AOP(Aspect Ori ...
Azure Devops (VSTS) Extensions 开发小记
我在使用tfx-cli打包Azure Devops插件时,输出了很黄很黄很亮瞎眼的(尤其是在Visual Studio Code采用了Dark Black Theme的情况下)警告warning: P ...
CentOS7 Hadoop 安装（完全分布式）
一.hadoop集群安装模式单机模式直接解压,无需任何配置.主要用于测试代码.没有分布式文件系统. 伪分布式完全分布式的一种形式,只是所有的进程都配置要一个节点上.有分布式文件系统,只不 ...
nginx 目录自动加斜线”/”
默认配置当你访问http://abc.example.com/dir 时不会加”/” 常见做法 if (-d $request_filename){ rewrite ^/(.*)([^/])$ ht ...
Charles设置断点- （超详解）
1.选择你要设置断点的接口 2.右键选择 Breakpoints 3.断点的相关配置, Proxy ——>Breakpoint Settings 5.双击刚刚已经设置的断点接口,进行设置 6. ...
Python '\r', '\n', '\r\n' 的彻底理解
回车和换行的历史: 机械打字机有回车和换行两个键作用分别是: 换行就是把滚筒卷一格,不改变水平位置. (即移到下一行,但不是行首,而是和上一行水平位置一样) 回车就是把水平位置复位,不卷动滚筒. ...
Key ssd_300_vgg/block3_box/L2Normalization/gamma not found in checkpoint的解决方案
在Tensorflow下使用SSD模型训练自己的数据集时,经过查找很多博客资料,已经成功训练出来了自己的模型,但就是在测试自己模型效果的时候,出现了如下错误. 2019-10-27 14:47:12. ...
【08】Kubernets：Service
写在前面的话在 K8S 第一节的时候我们简单提到过 Service 的工作模式有三种:userspace / iptables / ipvs.并且已经知道在目前新版本中默认是 ipvs,前提是在按照 ...

day 46