ios+透明度+css,ios

admin 管理员组

文章数量: 887021

ios+透明度+css,ios

一、CSS样式简介

行内样式:内联样式)直接在标签的style属性中书写

我是段落

pppppp

页内样式:在本网页的style标签中书写

div{

color: aquamarine;

font-size: 30px;

border: red solid;

}

p{

color: blue;

font-size: 80px;

background-color: azure;

}

pppppp

外部样式:在单独的CSS文件中书写，然后在网页中用link标签引用

css

div {

color: aquamarine;

font-size: 30px;

border: red dashed;

}

p{

color: blue;

font-size: 80px;

background-color: azure;

}

html

pppppp

css

二、CSS选择器

标签选择器:根据标签名找到对应的标签

类选择器:根据类名找到对应的标签

id选择器:根据id名找到对应的标签

并列选择器:用于多个标签之间有相同的样式

复合选择器:用于精准的定位

后代选择器:用于标签嵌套标签

直接后代选择器:格式: div>a

相邻兄弟选择器:格式:div+p

属性选择器:格式:div[name]

伪类:格式:div:hover

伪元素:格式:div:after

并列选择器

div, span{

color: red;

}

标签选择器

p{

color: green;

}

类选择器

.high{

color: grey;

}

id选择器

#main{

color: blue;

}

复合选择器

div.test {

color: orange;

}

后代选择器

div p{

background-color: brown;

}

直接后代选择器

div.test>p{

background-color: blue;

}

属性选择器

div[name]{

color: red;

}

div[name="111"]{

color: black;

}

伪类选择器

input:focus {

outline: none;

width: 400px;

height: 60px;

font-size: 30px;

}

input:hover{

outline: none;

width: 200px;

height: 30px;

font-size: 20px;

}

并列选择器

标签选择器

类选择器

直接后代选择器

后代选择器

CSS选择器

三、CSS选择器的优先级别

选择器的针对性越强，它的优先级就越高

important > 内联 > id > 类 | 伪类 | 伪元素 | 属性选择 > 标签> 通配符 > 继承

选择器的权值加到一起，大的优先；如果权值相同，后定义的优先

div{

font-size: 20px;

color: black;

}

.main{

font-size: 10px;

color: grey;

}

.test{

font-size: 5px;

color: blue;

}

*{

font-size: 30px;

color: green;

}

结果：blue

四、HTML的标签类型

块级元素具有以下特点： ①总是在新行上开始，占据一整行； ②高度，行高以及外边距和内边距都可控制； ③宽带始终是与浏览器宽度一样，与内容无关； ④它可以容纳内联元素和其他块元素。、

、、、、、、、、 、

行内元素的特点： ①和其他元素都在一行上； ②高，行高及外边距和内边距部分可改变； ③宽度只与内容有关； ④行内元素只能容纳文本或者其他行内元素,、、、、、、、、、、

行内-块级标签:多个行内-块级标签可以显示在同一行,能随时设置宽度和高度

#test1 {

display: inline;

}

#test2 {

display: inline-block;

color: orangered;

}

#test3 {

display: block;

}

222222

display

五、CSS属性

可继承属性:父标签的属性值会传递给子标签,一般是文字控制属性

不可继承属性:父标签的属性值不能传递给子标签,一般是区块控制属性

六、盒子模型

内容(content)

填充(padding) :上左下右 或 (上下)(左右)

边框(border)：border-width(边框宽度) border-style(边框样式) border-color(边框颜色)

边界(margin)：上左下右 或 (上下)(左右)

RGBA透明度

块阴影与文字阴影：box-shadow，text-shadow

*圆角：border-radius

形变：transform transform-origin transition

*{

margin: 0px;

}

div{

width: 300px;

height: 300px;

padding: 10px 20px 30px 40px;

border:10px solid;

margin: 20px 60px 40px 100px;

background-color: rgba(255,0,0,0.5);

display: inline-block;

border-radius: 20px;

box-shadow: 10px 20px 10px green;

text-shadow: 10px 20px 1px green;

}

盒子

盒子

七、标签的居中

水平居中:

行内标签 行内-块级标签text-align:center

块级标签 margin:0 auto

垂直居中 line-height == height

定位

父position:relative 子position:absolute

top:50%;left:50%;

transform:translate(-50%, -50%)

居中

#test0 {

background-color: red;

width: 600px;

height: 200px;

/*块级标签水平居中*/

margin: 0 auto;

/*块级标签行内居中*/

text-align: center;

}

/*行内*/

#test1 {

display: inline;

background-color: orange;

text-align: center;

/*行内标签设置高度和宽度无效,高度和宽度根据内容而定*/

width: 200px;

height: 100px;

}

/*行内-块级标签*/

#test2 {

display: inline-block;

color: orangered;

background-color: orange;

/*行内-块级标签设置高度和宽度无效,高度和宽度根据内容而定*/

width: 200px;

height: 100px;

}

/*块级标签*/

#test3 {

display: block;

margin: 0 auto;

background-color: orange;

}

/*块级标签*/

#test4 {

/*标签水平居中*/

margin: 0 auto;

/*内容水平居中*/

text-align: center;

width: 200px;

height: 200px;

background-color: #2b669a;

/*垂直居中*/

line-height: 200px;

}

test2-a

居中

定位

#test1 {

width: 300px;

height: 200px;

background-color: grey;

/*相对距离*/

position: relative;

margin: 60px 140px;

}

.test2 {

width: 200px;

height: 100px;

background-color: red;

/*绝对距离*/

position: absolute;

/*相对父类test1的距离*/

left: 30px;

top: 70px;

}

test1

CSS布局

1.1 标准流布局

所有网页都在标准流的布局中

从上到下,从左到右

1.2 脱离标准流布局

float:

作用:让子标签浮动在父标签的左边和右边

用途:常用于列表的左浮和右浮

#main{

background-color: red;

width: 500px;

height: 200px;

}

.test1{

background-color: blue;

/*浮动*/

float: left;

width: 30px;

height: 60px;

}

.test2{

background-color: yellow;

float: right;

}

.test3{

background-color: purple;

}

float

blue

red-left

without-left

black-right


外层div没有了浮动，因此红色边框宽度默认是100%全屏。其内容img由于加上了float，使得该img具有了欺骗性。float给img施了个障眼法，让该img的inline-height高度塌陷为0了。这样外层div计算高度时，认为img的高度为0，相当于div的content的高度为0，因此红色边框看起来是一条直线。但请注意障眼法毕竟是障眼法，并不是真的让img的高度塌陷为0了，可以看到上图中img的黄色边框还是有正常高度的。如果给div里加点文字，效果如下：可以看到，外层div在没有手动设定height的前提下，其高度是由内部content的最大高度决定的，由于img的float使得img具有高度塌陷的欺骗性，让div误以为img的line-height为0，因此div的高度就是文字的匿名inline-box的inline-height。

float

position结合top left right bottom

作用:让子标签在父标签的任意位置进行定位

规则:子绝父相,常用属性:absolute relative fixed

1.3 注意事项

任何一个标签,只要脱离标准流布局,标签的类型就被转化为行内-块级标签

本文标签： ios透明度css iOS