CSS学习

最新推荐文章于 2022-08-10 14:22:01 发布
最新推荐文章于 2022-08-10 14:22:01 发布
阅读量653 收藏
点赞数
分类专栏： FrontEnd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sgs595595/article/details/53998006
版权

 

CSS(Cascading Style Sheets): 层叠样式表 
section 作用 : 美化Html页面

section 创建
优先级: 
浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上
行间样式表)Inline style > 内部样式)Internal style sheet >
外部样式)External style sheet > 浏览器默认样式
!important: 
不要使用!不要使用!不要使用!
被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里.
1. 行间样式表
    <div style = "width:200px; height : 100px; border:1px solid red;"> 123 </div>
2. 内部样式表
    <head>
    <title> html学习 </title> 
    <style type="text/css">
        #aaa{width:400px;height:300px;border:2px solid blue; }
    </style>
    </head>
    <div id="aaa">456</div>
3. 外部样式表 样式代码专门放到一个文件中, 由html网页调用
    css文件:abc.css {width:200px;height:150px;border:3px solid yellow;background:pink;}
    html文件： <link rel="stylesheet" type="text/css" href="abs.css">

section 选择器
1. 标签选择器
p{font-size : 30px;color:red;}
div{width:200px;height:30px;border:1px solid red}
2. id选择器
#aaa{color:green }
3. 类选择器 
.cls{text-decoration:underline}

section 分组和嵌套选择器
1. 分组选择器
h1,h2,p
{
    color:green;
}
2. 嵌套选择器
p{ }: 为所有 p 元素指定一个样式.
.marked{ }: 为所有 class="marked" 的元素指定一个样式.
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式.
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式.
section 组合选择符
1. 后代选择器(以空格分隔): 后代选择器用于选取某元素的后代元素(包扩在其它元素中)
div p{background-color:yellow;}
2. 子元素选择器(以大于号分隔):子元素选择器(Child selectors)只能选择作为某元素子元素的元素
div>p{background-color:yellow;}
3. 相邻兄弟选择器(以加号分隔):选择紧接在另一元素后的元素,且二者有相同父元素
div+p{background-color:yellow;}
4. 普通兄弟选择器(以破折号分隔):后续兄弟选择器选取所有指定元素之后的相邻兄弟元素
div~p{background-color:yellow;}     
           
section 伪类和伪元素
伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id,class,属性等静态的标志.由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式；当状态改变时,它又会失去这个样式.由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类.
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多.实际上,设计伪元素的目的就是去选取诸如元素内容第一个字(母),第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作.它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素.                 
p:first-line {color:#ff0000;font-variant:small-caps;}

section Display(显示)与Visibility(可见性)
1. display属性设置一个元素应如何显示
display:none 隐藏某个元素,且隐藏的元素不会占用任何空间.
也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失
2. visibility属性指定一个元素应可见还是隐藏.
visibility:hidden 隐藏的元素仍需占用与未隐藏之前一样的空间.也就是说,该元素虽然被隐藏了,但仍然会影响布局

section 多列属性
CSS3 可以将文本内容设计成像报纸一样的多列布局
.newspaper{
	column-count:3;
	-moz-column-count:3; /* Firefox */
	-webkit-column-count:3; /* Safari and Chrome */}
h2{column-span:all;-webkit-column-span:all; /* Safari and Chrome */}

section 动画
.solarsys{
  width: 800px;
  height: 800px;;
  position: relative;
  margin: 0 auto;
  background-color: #000000;
  padding: 0;
  transform: scale(1);
}

/*太阳*/
.sun {
  left:357px;
  top:357px;
  height: 90px;
  width: 90px;
  background-color: rgb(248,107,35);
  border-radius: 50%;
  box-shadow: 5px 5px 10px rgb(248,107,35), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -5px 5px 10px rgb(248,107,35);
  position: absolute;
  margin: 0;
}

/*水星*/
.mercury {
  left:337.5px;
  top:395px;
  height: 10px;
  width: 10px;
  background-color: rgb(166,138,56);
  border-radius: 50%;
  position: absolute;
  transform-origin: 62.5px 5px;
  animation: rotate 1.5s infinite linear;
}

/*水星轨道*/
.mercuryOrbit {
  left:342.5px;
  top:342.5px;
  height: 115px;
  width: 115px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  margin: 0px;
  padding: 0px;
}

/*金星*/
.venus {
  left:309px;
  top:389px;
  height: 22px;
  width: 22px;
  background-color: rgb(246,157,97);
  border-radius: 50%;
  position: absolute;
  transform-origin: 91px 11px;
  animation: rotate 3.84s infinite linear;
}

/*金星轨道*/
.venusOrbit {
  left:320px;
  top:320px;
  height: 160px;
  width: 160px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  /*margin: 100px;*/
  /*transform-origin: -75px -75px;*/
  /*animation: rotate 4s infinite linear;*/
  margin: 0px;
  padding: 0px;
}

/*地球*/
.earth {
  left:266.5px;
  top:391px;
  height: 18px;
  width: 18px;
  background-color: rgb(115,114,174);
  border-radius: 50%;
  position: absolute;
  transform-origin: 134px 9px;
  animation: rotate 6.25s infinite linear;
}

/*地球轨道*/
.earthOrbit {
  left:275px;
  top:275px;
  height: 250px;
  width: 250px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  /*margin: 100px;*/
  /*transform-origin: -75px -75px;*/
  /*animation: rotate 4s infinite linear;*/
  margin: 0px;
  padding: 0px;
}

/*火星*/
.mars {
  left:222.5px;
  top:392.5px;
  height: 15px;
  width: 15px;
  background-color: rgb(140,119,63);
  border-radius: 50%;
  position: absolute;
  transform-origin: 177.5px 7.5px;
  animation: rotate 11.75s infinite linear;
}

/*火星轨道*/
.marsOrbit {
  left:230px;
  top:230px;
  height: 340px;
  width: 340px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  /*margin: 100px;*/
  /*transform-origin: -75px -75px;*/
  /*animation: rotate 4s infinite linear;*/
  margin: 0px;
  padding: 0px;
}

/*木星*/
.jupiter {
  left:134px;
  top:379px;
  height: 42px;
  width: 42px;
  background-color: rgb(156,164,143);
  border-radius: 50%;
  position: absolute;
  transform-origin: 266px 21px;
  animation: rotate 74.04s infinite linear;
}

/*木星轨道*/
.jupiterOrbit {
  left:155px;
  top:155px;
  height: 490px;
  width: 490px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  /*margin: 100px;*/
  /*transform-origin: -75px -75px;*/
  /*animation: rotate 4s infinite linear;*/
  margin: 0px;
  padding: 0px;
}

/*土星*/
.saturn {
  left:92px;
  top:387px;
  height: 26px;
  width: 26px;
  background-color: rgb(215,171,68);
  border-radius: 50%;
  position: absolute;
  transform-origin: 308px 13px;
  animation: rotate 183.92s infinite linear;
}

/*土星轨道*/
.saturnOrbit {
  left:105px;
  top:105px;
  height: 590px;
  width: 590px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  /*margin: 100px;*/
  /*transform-origin: -75px -75px;*/
  /*animation: rotate 4s infinite linear;*/
  margin: 0px;
  padding: 0px;
}

/*天王星*/
.uranus {
  left:41.5px;
  top:386.5px;
  height: 27px;
  width: 27px;
  background-color: rgb(164,192,206);
  border-radius: 50%;
  position: absolute;
  transform-origin: 358.5px 13.5px;
  animation: rotate 524.46s infinite linear;
}

/*天王星轨道*/
.uranusOrbit {
  left:55px;
  top:55px;
  height: 690px;
  width: 690px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  /*margin: 100px;*/
  /*transform-origin: -75px -75px;*/
  /*animation: rotate 4s infinite linear;*/
  margin: 0px;
  padding: 0px;
}

/*海王星*/
.neptune {
  left:10px;
  top:390px;
  height: 20px;
  width: 20px;
  background-color: rgb(133,136,180);
  border-radius: 50%;
  position: absolute;
  transform-origin: 390px 10px;
  animation: rotate 1028.76s infinite linear;
}

/*海王星轨道*/
.neptuneOrbit {
  left:20px;
  top:20px;
  height: 760px;
  width: 760px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  /*margin: 100px;*/
  /*transform-origin: -75px -75px;*/
  /*animation: rotate 4s infinite linear;*/
  margin: 0px;
  padding: 0px;
}

@keyframes rotate {
  100% {
    transform: rotate(-360deg);
  }
}

<div class="solarsys">
  <!--太阳-->
  <div class='sun'></div>

  <!--水星轨道-->
  <div class='mercuryOrbit'></div>

  <!--水星-->
  <div class='mercury'></div>

  <!--金星轨道-->
  <div class='venusOrbit'></div>

  <!--金星-->
  <div class='venus'></div>

  <!--地球轨道-->
  <div class='earthOrbit'></div>

  <!--地球-->
  <div class='earth'></div>

  <!--火星轨道-->
  <div class='marsOrbit'></div>

  <!--火星-->
  <div class='mars'></div>

  <!--木星轨道-->
  <div class='jupiterOrbit'></div>

  <!--木星-->
  <div class='jupiter'></div>

  <!--土星轨道-->
  <div class='saturnOrbit'></div>

  <!--土星-->
  <div class='saturn'></div>

  <!--天王星轨道-->
  <div class='uranusOrbit'></div>

  <!--天王星-->
  <div class='uranus'></div>

  <!--海王星轨道-->
  <div class='neptuneOrbit'></div>

  <!--海王星-->
  <div class='neptune'></div>
</div>

 

aaa_dai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS函数：fit-content与matrix的使用
胖蔡叨叨叨
06-06 187
CSS函数。顾名思义，这三个函数只能在网格布局中使用。。pxcmvwch等。当参数为百分比值，相对于给定轴中可用空间的百分比。在网格属性中，它与列轨道中网格容器的内联大小和行轨道中网格容器的块大小相关。否则，它与布局框的可用内联大小或块大小相关，具体取决于书写模式。
CSS matrix函数
发果叁
05-24 2187
matrix()是CSS的transform的一个基础属性，用它可以实现很多高级、复杂的效果，实际上transfrom的translate、rotate等都是在matrix的基础上实现的简化版的语法。 线性代数基础 了解和使用必须熟悉线性代数的向量和矩阵知识，当初学习的线性代数的课程早就还给老师了，因为不知道有什么用，如果知道今天会用到，当初一定会好好学习线性代数、高数等课程。 （1）向量 向量用来描述方向和大小，一般使用笛卡尔坐标系来进行向量的描述，比如向量(2, 1)和(3, 3)在坐标系中表示如下：
CSS3 Transform Matrix
weixin_30855099的博客
03-05 180
css3中的transform让我们操作变形变得很简单，诸如，translate–移动，scale–缩放，rotate–旋转，skew–斜切。这几个属性很方便，也很简单，但是其中matrix我们就不常使用了吧。-webkit-transform: matrix(1, 0, 0, 1, 100, 100)看到这样一句css，你也许很讨厌怎么一堆的数字，你也许斜视matrix–css也能搞出这货？这篇...
路恩CSS学习助手
07-07
路恩CSS学习助手，可快速查找css1、css2、css3全部属性和值，并配有每个属性和值的简要说明；对CSS语法规则和CSS选择器也做了详细介绍；并内置了CSS布局向导式学习教程。可以把本软件看作是一个CSS词典和CSS教程软件...
CSS学习手册
12-26
**CSS学习手册** 在网页设计领域，层叠样式表（Cascading Style Sheets，简称CSS）是不可或缺的一部分，它赋予HTML或XML文档以视觉样式，让网页内容更加丰富多彩且易于维护。作为史上最全的CSS学习手册，我们将深入...
CSS 学习心得
12-09
不论页面的问题大小都统统交给他们解决，这样不仅影响了自己的工作效率，还给UED的同事带去不少麻烦，正好这几天工作不是很紧张，在http://www.w3school.com.cn/index.html网站上浏览了一些关于CSS的资料，感觉CSS比...
CSS学习案例图片素材
最新发布
04-17
这个“CSS学习案例图片素材”压缩包显然是为那些正在学习和提升CSS技能的人准备的，包含了一系列与CSS相关的图像资源，可能用于演示、练习或者教学。下面，我们将深入探讨CSS的一些核心概念和应用。 1. **CSS基本...
CSS3中的矩阵
flqbestboy的专栏
09-27 2024
CSS3中的矩阵 CSS3中的矩阵指的是一个方法，书写为matrix()和matrix3d()，前者是元素2D平面的移动变换(transform)，后者则是3D变换。2D变换矩阵为3*3, 如下面矩阵示意图；3D变换则是4*4的矩阵。 有些迷糊？恩，我也觉得上面讲述有些不合时宜。那好，我们先看看其他东西，层层渐进——transform属性。   transform中有这么几个
HTML 学习笔记 CSS3 (2D Matrix)
ddiv24492的博客
12-23 518
Matrix 矩阵 那么什么是矩阵呢？ 矩阵可以理解为方阵，只不过 平时方阵里面站着人 矩阵中是数值： CSS3中的矩阵： css3中的矩阵指的是一个方法，书写为matrix() 和 matrix3d(),前者是元素2D平面的移动变换(transfrom)，而后者是3D变换。2D变换矩阵3*3，如上图的示意图：3D变换则是4*4的矩阵。 可能有些难以理解 我们可以先看看其他东...
css matrix矩阵,矩阵 | matrix() (Transforms) - CSS 中文开发手册 - Break易站
weixin_30363285的博客
08-04 296
??CSS 中文开发手册矩阵 | matrix() (Transforms) - CSS 中文开发手册该matrix() CSS函数定义了一个齐次2D变换矩阵。注意： matrix(a, b, c, d, tx, ty)是matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)的一个简写。语法该matrix()功能是用六个值指定的。常量值...
matrix() 在css上的应用
Old urchin的博客
08-20 442
matrix（n,n,n,n,n,n）包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。 实现平移 在CSS3中我们矩阵的原始值是这样的 transforms:matrix(1,0,0,1,0,0); 对应的矩阵为： 那为了便于描述我们把它写成：transforms:matrix(a,b,c,d,e,f);矩阵为： 根据我们上面说的用矩阵与向量的乘法来施加运动，我们就可以来看一下它到底是怎么...
CSS中transform：matrix属性
qq_43178567的博客
08-10 195
css中transform：matrix属性
HTML+CSS40 CSS matrix函数
多啦的博客
12-02 269
matrix()是CSS的transform的一个基础属性，用它可以实现很多高级、复杂的效果，实际上transfrom的translate、rotate等都是在matrix的基础上实现的简化版的语法。
CSS矩阵探秘
JavaKotlin技术专栏
12-03 691
1. 矩阵数学概念 大家上次听到矩阵这个词是什么时候？应该是大学时候的线性代数。线性代数是大多数人的噩梦，概念可能已经忘得差不多，先来回顾一下 在数学中，矩阵(Matrix)是一个按照长方阵列排列的复数或实数集合， 最早来自于方程组的系数及常数所构成 的方阵 由 m × n 个数排成的m行n列的数表称为m行n列的矩阵，简称m × n矩阵。 2. 矩阵和向量 向量可以用矩阵表示,且有时特殊矩阵就是向量 矩阵包含向量 向量的运算离不开矩阵 3. 矩阵乘法 矩阵第m行与第n列交叉位置的那个值，等于第一个
css3 matrix() 方法
hugejihu9的专栏
01-17 353
文章来自：源码在线https://www.shengli.me/css/600.html     实例：   效果：                
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值