CSS/CSS3语法新特性笔记

Python微信订餐小程序课程视频

https://edu.csdn.net/course/detail/36074

Python实战量化交易理财系统

https://edu.csdn.net/course/detail/35475

CSS层叠样式表

三大特性

层叠性:相同的样式会覆盖
继承性:属性可向下继承
优先级:范围越小权重越高

选择器

基础选择器

标签选择器

1 body {
2	 color:#fff;
3 }

类选择器

1 .people‐first {
2 	color:green;
3 }

id选择器

1 #laowang {2 color:yello;
3 }

通配符选择器

* {
2	 margin: 0 ;
3	 padding: 0 ;
4 }

高级选择器

后代选择器

1 ul li {
2	 list‐style;none;
3 }

子选择器

1 h3>a {
2 	line‐height:36px;
3 }

并集选择器

1 div,
2 p {
3 	font‐size:14px;
4 }

伪类选择器

1 a::hover {
2 	background‐color:springgreen;
3 }
a::link
a::visited
a::hover
a::active
input::focus

相邻兄弟选择器

h1 + p {margin-top:50px
}

font属性

1 font‐style:italic;
2 font‐weight: 400 ;
3 font‐size:16px;
4 font‐family:"Microsoft Yahei";
5 font:italic 400 16px "Microsoft Yahei";

字体图标的下载与使用

text属性

1 color:pink;
2 text‐align:center;
3 text‐decoration:none;
4 text‐indent:2em;
5 line‐height:26px;

块元素

例如h p div ul li

  • 独占一行
  • 宽 高 内外边距 可控
  • 宽度默认继承
  • 主要作为容器

行内元素

例如 a strong b em

  • 一行可以是多个
  • 宽高无法设定
  • 默认宽度为自身宽度
  • 很内元素只能容纳文本或其他行内元素

注:连接标签里不能放链接
注:链接里可放块级元素,但最好把a转换成块级元素安全

行内块元素

例如 img input td

  • 可以一行多个(有缝隙)
  • 可以设置宽高
  • 宽度为默认
  • 元素显示模式转换
1 display:block;
2 display:inline;
3 display:inline‐block;

background背景

1 background‐color:transparent;
2 background‐img:url(./xx);
3 background‐repeat:repeat | no‐repeat | repeat‐x | repeat‐y;
4 background‐position:center center;
5 background‐attachment:scroll | fixed;
6 background:pink url(./) no‐repeat fixed center top;
1 background‐size:500px 200px;//cover等比完全覆盖,contain等比宽高覆盖

精灵图的具体操作与使用

盒子模型

img

border or margin

1 border‐width:5px;
2 border‐style:solid; // dashed(虚线) dotted(点线)
3 border‐color:black;
4
5 border:5px solid black;
1 margin:0 auto;//可使盒子水平居中
2 margin‐left:‐1px;//用于消除紧挨着的边框
border-collapseborder-collapse: collapse;border collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的

HTML 中那样分开显示。

圆角边框

1 border‐radius:10px;
2 border‐radius:1px 2px 3px 4px;//右上角开始
3 border‐top‐left‐radius:...;

盒子阴影

1 box‐shadow: 10px 10px 5px ‐5px rgba(0,0,0,.3);

2 水平阴影 垂直阴影 [模糊 尺寸 颜色 外部或内部]

文字阴影

1 text‐shadow:10px 10px 5px rgba(0,0,0,.3);

float浮动

1 float:left;

浮动特性:

  • 脱离标准流
  • 一行显示,顶部对齐
  • 具备行内块的特性

清除浮动

1 . 额外标签法

1 <div>
2 <div>盒子div>
3 <div class="clearfix">div>
4 div>
1 .clearfix {
2     clear: both;
3 }

2 . 父级添加overflow

1 <div class="clearfix">
2 <div>盒子div>
3 div>
1 .clearfix {
2     overflow:hidden;
3 }

3 . :after伪元素

1 <div class="clearfix">
2 <div>盒子div>
3 div>
1 .clearfix::after {
2     content: "";
3     display: block;
4     height:  0 ;
5     clear: both;
6     visibility: hidden;
7 }
8
9 .clearfix {
10     *zoom:  1 ;
11 }

4 . 双伪元素清楚浮动

1 <div class="clearfix">
2 <div>盒子div>
3 div>
1 .clearfix:before,
2 .clearfix::after {
3     content: "";
4     display: table;
5 }
6
7 .clearfix::after {
8     clear: both;
9 }
10
11 .clearfix {
12     *zoom:  1 ;
13 }

定位

静态定位(了解)

1 position:static;

相对定位

1 position:relative;

绝对定位

1 position:absolute;

固定定位

1 position:fixed;

粘性定位(了解)

1 position:stycky;

边偏移

top

bottom

left

right

优先级

1 z‐index:2;

元素显示与隐藏

显示模式

1 display:block | inline | none ;
2 块级 行内 无

可视能力

1 visibility:inherit | visible | hidden;
2 继承 可视 隐藏

溢出部分

1 overflow:visible | hidden | scroll | auto;
2 不剪切,不加滚动条 隐藏 滚动条 自动

用户界面样式

鼠标样式

image

1 cursor:default;

image

1 cursor:pointer;

image

1 cursor:move;

image

1 cursor:text;

image

1 cursor:not‐allowed;

表单样式

1 input {
2 	outline:none;
3 }

文本域样式

1 textarea {
2 	resize:none;
3 }

对齐方式

1 vertical‐align:baseline | top | bottom | middle;
2 				  基线对齐 顶线 底线 中线

图片采用基线对齐后,底部有白色缝隙

文字省略

单行文本溢出显示省略号必须满足三个条件

1 white‐space:nowrap;
2 overflow:hidden;
3 text‐overflow:ellipis;

CSS3新增特性

选择器

属性选择器

选择具有value的input

1 input[value]{}

选择value="text"的input

1 input[value="text"]{}

选择icon开头的div

1 div[class^=icon]{}

选择data结尾的div

1 div[class$=data]{}

选择含有iii的div

1 div[class*="iii"]{}

结构伪类选择器

1 :first‐child{}
2 :last‐child{}
3 :nth‐child(n){}//n可为数字 1 , 2 , 3  关键字even 偶数,odd奇数
1 :first‐of‐type
2 :last‐of‐type
3 :nth‐of‐type(on)

伪元素选择器

1 div::before{
2 content="";
3 }
4 div::after{
5 content="";
6 }

C3盒子模型

1 box‐sizing:conten‐box;//传统盒子模型
2 box‐sizing:border‐box;//边框不占用大小,而是挤压内容

滤镜

1 filter:blur(5px);//进行布尔模糊

其他

1 width:calc(100%‐800px);

过渡

1 transition:all 1s;//所选属性 花费时间 运动曲线 何时开始

转换

1 transform:translate(100px,‐50px);//纯移动,保留源
2 transform:rotate(45deg);//顺时针旋转45°
3 transform:scale(2,2);//长和宽变为原来的 2 倍
4
5 transform:translate() rotate() scale();//简写

3D转换

1 transform‐style:flat | preserve;//开启3D空间(默认不开启)
2 prespective:500px;//开启透视 设置透视高度
3
4 transform:translate3d(x,y,x);//3d移动

动画

1 animation‐name:动画名称;
2 animation‐duration:3s;//动画时间
3 animation‐timing‐function:ease;//运动曲线
4 animation‐delay:5s;//五秒之后开始
5 animation‐iteration‐count:ifinite;//重复次数 无限
6 animation‐direction:alternate;//逆向
7 animation‐fill‐mode:forwards;//保持
8
9 animation:动画名称 动画时间 [速度曲线 何时开始 播放次数 是否反向 结束状态];

标准viewport视口设置

1 2         content="width=device‐width,
3 initial‐scale=1.0,
4 user‐scalable=no,
5 maximum‐scale=1.0,
6 minimum‐scale=1.0">

流式布局(百分)

宽度为百分比

flex布局

1 display:flex;

设置主轴方向

1 flex‐direction: row;
2 row‐reverse//右到左
3 column//上到下
4 column‐reverse//下到上

设置主轴的子元素排列方式

1 justify‐content:flex‐start;// 左对齐(默认)
2 flex‐end 右对齐
3 center 居中
4 space‐around 平均分配
5 space‐between 先两侧贴边然后平均分

设置子元素是否换行

1 flex‐wrap:nowrap;//不换行(默认)
2 wrap;//换行

设置侧轴上的子元素排列方式(单行)

1 align‐items:flex‐start;// 左对齐
2 flex‐end 右对齐
3 center 居中
4 stretch 拉伸(默认值)

设置侧轴上的子元素排列方式(多行)

1 align‐content:flex‐start;// 左对齐
2 flex‐end 右对齐
3 center 居中
4 space‐around 平均分配
5 space‐between 先两侧贴边然后平均分
6 stretch 拉伸(默认值)

flex子属性

1 flex:50%;
2 align‐self:flex‐start;子项在侧轴的排列方式(了解)

rem适配布局

em 父级字体大小

rem HTML字体大小

媒体查询

1 @media screen and (min‐width:500px){ //如果屏幕大于等于500px
2 html{
3 font‐size:14px;
4 }
5 }

less

1 @color1: skyblue;
2 @font14: 14px;
3 body{
4 background‐color:@color1;
5 font‐size:@font14;
6 a{
7 text‐decration:none;
8 &:hover{
9 background‐color:@color1;
10 font‐size:14px+16;
11 }
12 }
13 }
14 @import"common"//多个less合并在一起共同生成一份css文件

响应式布局

Bootstrap框架

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/401245.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vb 坐标点击

引用 &#xff1a;http://www.vbgood.com/thread-113934-1-1.html 第一步在窗体的通用栏写如下代码&#xff1a;Private Type pointapiX As LongY As LongEnd TypePrivate Declare Function GetCursorPos Lib "user32" (lpPoint As pointapi) As Long第二步在窗体上放…

开始写技术博客

2012年年底掏钱参加的java的培训&#xff0c;13年初找JAVA工作&#xff0c;发现很难找&#xff0c;公司需要的都是有工作经验的&#xff0c;刚刚从培训机构出来的学生不受欢迎&#xff0c;工作很难找&#xff0c;一个月之后打算退而求其次&#xff0c;找了份PHP的工作(那时对ph…

C# winform 自定义皮肤制作

最近要做个软件正在做技术准备&#xff0c;由于WINFORM生成的窗体很丑陋&#xff0c;一个好的软件除了功能性很重要外&#xff0c;UI的体验也是不容忽视的。习惯性的在网上搜素了下&#xff0c;换肤控件也有好几款&#xff0c;但是有些用起来不是很好用&#xff0c;好点的也要花…

Vue 源码解读(10)—— 编译器 之 生成渲染函数

Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/course/detail/35475 前言 这篇文章是 Vue 编译器的最后一部分&#xff0c;前两部分分别是&#xff1a;Vue 源码解读&#xff08;8&#xff09;…

蓝牙PROFILE

Bluetooth的一个很重要特性&#xff0c;就是所有的Bluetooth产品都无须实现全部 的Bluetooth规范。为了更容易的保持Bluetooth设备之间的兼容&#xff0c;Bluetooth规范中定义了Profile。Profile定义了设备如何实现一种连接或者应用&#xff0c;你可以把Profile理解为连接层或者…

Laravel Session 遇到的坑

这两天遇到了一个很奇怪的问题&#xff0c;更新session &#xff0c;session的值不变。经过一番追查&#xff0c;终于找到问题&#xff0c;并搞明白了原理。写这篇博客记录下。 框架版本 Laravel 5.4 问题 先来描述下问题&#xff0c;我在我们项目基础的Middleware中&#xff0…

bootstrap 中这段代码 使bundles 失败

bootstrap 中这段代码 使bundles 失败 _:-ms-fullscreen, :root input[type"date"], _:-ms-fullscreen, :root input[type"time"], _:-ms-fullscreen, :root input[type"datetime-local"], _:-ms-fullscreen, :root input[type"month"…

敏捷结果30天之第十二天:效率角色-你是启动者还是完成者

一.学习1.启动者&#xff1a;善于思考新想法&#xff0c;有太多想法还未开始&#xff0c;喜欢启动一些新事物&#xff0c;但是当事物成型之后就会离开去寻找下一个创新点。2.完成者&#xff1a;喜欢通过从头到尾的做完一件完整的事情来获得成就满足感。知道自己属于那种效率角色…

netty系列之:EventLoop,EventLoopGroup和netty的默认实现

Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/course/detail/35475 目录* 简介 EventLoopGroup和EventLoopEventLoopGroup在netty中的默认实现EventLoop在netty中的默认实现总结 简介 在net…

BZOJ 1444: [Jsoi2009]有趣的游戏 [AC自动机 高斯消元]

1444: [Jsoi2009]有趣的游戏 题意&#xff1a;每种字母出现概率\(p_i\)&#xff0c;有一些长度len的字符串&#xff0c;求他们出现的概率 套路DP的话&#xff0c;\(f[i][j]\) i个字符走到节点j的概率&#xff0c;建出转移矩阵来矩乘几十次可以认为是无穷个字符&#xff0c;就得…

Oracle安装部署之RedHat安装Oracle11g_R2

硬件配置 内存 &#xff1a;≥1G 硬盘空间&#xff1a;≥10G 上传oracle11g安装包&#xff1a; putty上用wcw用户登录&#xff0c;通过ftp服务上传oracle安装文件到/home/wcw目录下解压 #unzip linux_11gR2_database_1of2.zip #unzip linux_11gR2_database_2of2.zip 检查和安装…

Fans没信心,回家继续修行

今天在CSDN上看了一篇的文章&#xff0c;感觉自己实在是太菜了&#xff0c;以至于对毕业之后从事IT行业没有了任何信心。现在也不清楚&#xff0c;自己能否在it行业混下去。自己的技术实在是一个水啊。8号就要回家了&#xff0c;兄弟姐妹们如果有事情&#xff0c;请发短信至 15…

查找字符串中要查找的字符串最后一次出现的位置

C Code 123456789101112131415161718192021222324#include <stdio.h>#include <string.h>//查找字符串中要查找的字符串最后一次出现的位置 char *strrstr (const char*string, const char*str){char *index NULL;char *ret NULL;int i 0;do{index strstr(stri…

基于SqlSugar的数据库访问处理的封装,支持多数据库并使之适应于实际业务开发中

Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/course/detail/35475 在我的各种开发框架中&#xff0c;数据访问有的基于微软企业库&#xff0c;有的基于EFCore的实体框架&#xff0c;两者各有其…

Unity 实现物体破碎效果(转)

感谢网友分享&#xff0c;原文地址&#xff08;How to Make an Object Shatter Into Smaller Fragments in Unity&#xff09;&#xff0c;中文翻译地址&#xff08;Unity实现物体破碎效果&#xff09; In this tutorial I will show you how to create a simple shattering ef…

【转】/usr/bin/python^M: bad interpreter: No such file

转自&#xff1a;http://hanbaobao2005.blog.51cto.com/647054/635256今天在WingIDE下写了个脚本&#xff0c;传到服务器执行后提示&#xff1a; -bash: /usr/bin/autocrorder: /usr/bin/python^M: bad interpreter: No such file or directory 分析&#xff1a; 这是不同系统编…

PyTorch常用参数初始化方法详解

Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/course/detail/35475 1、均匀分布初始化 torch.nn.init.uniform_(tensor, a0, b1) 从均匀分布U(a, b)中采样&#xff0c;初始化张量。  参数…

sql语句中的删除操作

drop: drop table tb; 删除内容和定义&#xff0c;释放空间。简单来说就是把整个表去掉。以后不能再新增数据&#xff0c;除非新增一个表。 truncate&#xff1a; truncate table tb; 删除内容、释放空间但不删除定义&#xff0c;即只是清空数&#xff0c;不会删除表的数据结构…

[面试题]事件循环经典面试题解析

Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/course/detail/35475 基础概念 进程是计算机已经运行的程序,线程是操作系统能够进行运算调度的最小单位,它被包含在进程中.浏览器中每开一个Tab…

CC254x--OSAL

OSAL运行原理 蓝牙协议栈PROFILE、所有的应用程序、驱动等都是围绕着OSAL组织运行的。OSAL&#xff08;Operating System Abstraction Layer&#xff09;操作系统抽象层&#xff0c;它不是一个真正的操作系统&#xff08;它没有 Context Switch 上下文切换功能&#xff09;&am…