CSS新增1117

最新推荐文章于 2024-06-05 22:45:58 发布

榕树先生

最新推荐文章于 2024-06-05 22:45:58 发布

阅读量187

点赞数

本文链接：https://blog.csdn.net/Departuretree/article/details/103103911

版权

页面布局

<head>
	<nav></nav>
</head>
<section>
	<nav></nav>
	<footer></footer>
</section>
<aside></aside>//标签定义其所处内容之外的内容。
<footer></footer>

音频标签定义
格式：video:ogg webm mp4
audio:mp3 ogg wav

属性：width height src controls autoplay loop poster 
//宽 高 视频URL 控件 自动播放 循环播放 规定视频下载时显示的图像

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>

表单
text password textarea checkbox radio file select（下拉列表） button submit reset

H5表单
email url data week month time number color range(滑动条) search（搜索和results连用）

H5表单属性
required//必须填

<input type="text" form="myform" autocomplete="on" name="name" required/>

autocomplete//自动记忆和name属性连用 on/off
启用自动完成功能的表单

<input type="text" form="myform" autocomplete="on" name="name" required/>

placeholder//提示信息
pattern//正则表达式

<input type="text" pattern="[A-z]{3,6}" name="country" title="三个字母的国家代码" required/>

autofocus//自动聚焦
选择器
去边框间距
html body ul li ol dl dd dt p h1 h2 h3 h4 h5 h6 form fieldset legend img

元素选择器
*{} 通配符
e 标签选择器
#id id选择器
.class 类选择器
关系选择器
e f包含选择器
e>f 父子选择器
e+f 相邻选择器：e元素后面所有的f元素
e~f 兄弟选择器：e后面所有的兄弟元素f
UI元素状态伪类选择器
e:checked 选中状态（只针对单选按钮和复选框）
e:enabled 可编辑状态 (默认状态）
e:disabled 禁用状态

<style>
	input:disabled{
		background:yellow;
	}
	input:enabled{
		background:red;
	}
	input:checked+span{
		background:green;
	}
</style>

<body>
<ul>
	<li>
		<input type="text" name="id" value="99" disabled /><span>ID</span>
		<input type="password" name="pwd" value="" enabled />
		<label><input type="checkbox" name="like" value="2" checked /><span>黑色</span></label>
	</li>
</ul>
</body>

属性选择器
e[attr]
e[attr=“value”]
e[attr~=“value”] 包含空格及value的e元素
e[attr|=“value”] 以value开头且有分隔符-的e元素
e[attr^="value’] 以value开头的e
e[attr$=“value”] 以value结尾的e标签
e[attr*=“value”] attr中包含value的e

<style>
		p[id]{
            background: palevioletred;
        }
        p[id="green"]{
            background: cadetblue;
        }
        p[class~="black"]{
            background: orchid;
        }
        p[class|="a"]{
            color: cadetblue;
        }
        a[href^="http://"]{
            background-color: aquamarine;
            text-decoration: none;
        }
        a[href$="rar"]{
            text-decoration: none;
            color: cornflowerblue;
            background-color: darkcyan;
        }
        a[href$="php"]{
            text-decoration: none;
        }
        a[href$="rar"]:after{
            content: url(images/txt.jpg);
        }
</style>

<p id="red">小红</p>
<p id="green">绿毛龟</p>
<p class="fl black">我最喜欢黑色了</p>
<p class="a-b">小兰兰</p>

<a href="http://www.baidu.com">百度一下</a><br/>
<a href="aa.php">返回首页</a><br/>
<a href="aa.rar">下载高清电影</a>

伪对象选择器
e:first-letter 第一个字符
e:first-line 第一行
e:before 前
e:after 后
e::selection 选中状态时触发的结果

<style>
 	p:first-letter{
            color: red;
            font-size: 18px;
        }
    p:first-line{
            color: green;
        }
    p{
            font-size: 14px;
        }
    p::selection{
            color: orange;
        }
</style>
<P>
    春晓 孟浩然<br/>
    春眠不觉晓<br/>
    处处闻啼鸟<br/>
    夜来风雨声<br/>
    花落知多少<br/>
</P>

结构伪类选择器
:root 根选择器
e:first-child 第一个子元素
e:last-of-child 最后一个子元素
e:only-child 唯一的一个子元素
e:nth-child(n) 第n个子元素 n(odd even 数字公式)
e:nth-last-child(n) 倒数第N个子元素

e:first-of-type 第一个同类型元素
e:last-of-type 最后一个同类型元素
e:only-of-type 唯一同类型元素
e:nth-of-type(n) 第N个同类型元素 n=odd even 数字公式
e:nth-last-of-type(n) 倒数第n个同类型元素

e:empty 空元素

box-shadow 盒子阴影

box-shandow 水平位置垂直位置模糊距离阴影大小阴影颜色【内置或外置】
border-image 边框图片

border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移。
border-image-width 图片边框的宽度。
border-image-outset 边框图像区域超出边框的量。
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)
background-origin:border-box,padding-box,content-box;
background-origin 属性规定 background-position 属性相对于什么位置来定位
padding-box 背景图像相对于内边距框来定位
border-box 背景图像相对于边框盒来定位
content-box 背景图像相对于内容框来定位
background-clip:border-box,padding-box,content-box;
border-box 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框

渐变
线性渐变：
background:linear-gradient(方向，颜色)
background:repeating-linear-gradient(方向，颜色)重复线性渐变

从左上角到右下角
background: linear-gradient(to bottom right, red, yellow);
从左到右
background: linear-gradient(to right, red , yellow);

径向渐变：
background:radial-gradient(中心坐标，形状大小颜色)
默认值是 ellipse(椭圆)
background:repeating-radial-gradient() 重复径向渐变

background: radial-gradient(shape size at position, start-color, ..., last-color);

closest-side 最近的边
farthest-side 最远的边
closest-corner 最近的角
farthest-corner 最远的角

background: radial-gradient(closest-side at 60% 55%, red, yellow, black);

字体的改变

<style>
  		@font-face {
            font-family: name1;
            src: url(fonts/Marvel-Regular.ttf);
        }
        @font-face {
            font-family: name2;
            src:url(fonts/Roboto-Regular.ttf)
        }
        p:first-of-type{
            width: 12em;
            border: solid 1px cornflowerblue;
            word-break: break-all;/*允许在单词内换行*/
        }
        p:nth-of-type(2){
            font-family: name1;
            width: 12em;
            border: solid 1px cornflowerblue;
            word-wrap: break-word;/*允许在长文本处换行*/
        }
        p:last-of-type{
            font-family: name2;
            width: 12em;
            border: solid 1px cornflowerblue;
            word-break: keep-all;/*半角或者连字符处换行*/
        }
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam beatae cupiditate facere maiores minima, nisi perferendis quos sed ullam. Ad cumque deserunt dolorem ipsam itaque laudantium magni, modi molestias nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam beatae cupiditate facere maiores minima, nisi perferendis quos sed ullam. Ad cumque deserunt dolorem ipsam itaque laudantium magni, modi molestias nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam beatae cupiditate facere maiores minima, nisi perferendis quos sed ullam. Ad cumque deserunt dolorem ipsam itaque laudantium magni, modi molestias nulla!</p>

多列
column-count:分列数
column-gap:栏间距
column-rule:分隔线

<style>
	p{
		 -webkit-column-count:5;
         -moz-column-count: 5;
       	 column-count: 5;
         -webkit-column-gap: 20px;
         column-gap: 20px;
         -webkit-column-rule: solid 1px red;
          column-rule:solid 1px red;
        }
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam beatae cupiditate facere maiores minima, nisi perferendis quos sed ullam. Ad cumque deserunt dolorem ipsam itaque laudantium magni, modi molestias nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam beatae cupiditate facere maiores minima, nisi perferendis quos sed ullam. Ad cumque deserunt dolorem ipsam itaque laudantium magni, modi molestias nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam beatae cupiditate facere maiores minima, nisi perferendis quos sed ullam. Ad cumque deserunt dolorem ipsam itaque laudantium magni, modi molestias nulla!</p>

弹性盒子
弹性盒子是CSS3的一种新的布局模式
CSS3弹性盒子，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式

在祖先元素中添加
direction:ltr/rtl;
在父元素中添加
display：flex;
display:-webkit-flex;
子元素排列方式：
flex-direction:row/row-reverse/column/column-reverse
row:横排从左到右排列，默认的排列方式
row:反转横向排列（右对齐，从后往前排，最后一项排在最前面）
colum：纵向排列
oclumn-reverse:反转纵向排列最后一项在最上面
内容对齐属性：
justify-content:flex-start/flex-end/center/space-between/space-around
设置在弹性子元素纵轴方向上的对齐方式
align-items:flex-start/flex-end/center/baseline/stretch
设置各个行的对齐方式(用于修改flex-wrap属性的行为)
align-content:flex-start/flex-end/center/space-between/space-around/stretch
指定弹性盒子的子元素换行方式
flex-wrap:nowrap/wrap/wrap-reverse/initial/inherit(默认不换行)
在子元素中添加
子元素顺序
order:1;
margin:auto;对象自动留白
子元素纵向对齐
有父元素按align-item走，无父元素按stretch走/靠顶端/靠底端/居中/基线/以父元素为参考点走
align-self：auto/flex-start/flex-end/center/baseline/stertch
按比例分配元素
flex:比例值；
如：div>div*3
子元素按照顺序添加flex:1 flex:3 flex:1 结果1：3：1（按比例分配）

指定一个元素是否由用户调整大小
resize:none/both/horizontal/vertical 无/两边/水平/垂直

 <style>
        div{
            border:2px solid;
            padding:10px 40px;
            width:300px;
            resize:both;
            overflow:auto;
        }
        p{
            width:200px;
            height:200px;
            background: yellowgreen;
            resize: both;
            overflow: auto;
        }
        input{
            width:200px;
            height:200px;
            resize: both;
            overflow: auto;
        }
        img{
            width:200px;
            height:200px;
            resize: both;
            overflow: auto;
        }
</style>

轮廓线outline
在border元素的外围
outline-offset 轮廓线距离（border与轮廓线的距离）

媒体查询：
针对不同媒体类型可以定制不同的样式规则

第一种

<link rel="stylesheet"  media="screen and (min-width:1200px) " href="pc.css"/>
<link rel="stylesheet"  media="screen and (min-width:750px) and (max-width:1199px) " href="ipad.css"/>
<link rel="stylesheet"  media="screen and (max-width:749px) " href="mobile.css"/>
1200以上PC   750－1199  pad        749以下 mobile

第二种CSS

 @media screen and (min-width:1200px){
            body{
                background: yellowgreen;
            }
        }
 @media screen and (max-width:1199px) and (min-width:750px){
            body{
                background: pink;
            }
        }

响应式页面
单位：
px % em rem

移动transform:translate rotate scale skew
translate(水平位移，垂直位移)
scale(n) n:0-1缩小 n>1放大
skew(x轴倾斜，y轴倾斜)
过渡效果
transtition: 动画延迟时间 transform(名称) 时间频率
频率：linear匀速
ease:慢开始慢结束
ease-in 慢开始
ease-out 慢结束
ease-in-out 慢开始和结束

animate

@-webkit-ketframes name{
	%0{}
	%20{}
	%80{}
	%100{}
}
animate: 动画延迟时间  name(名称) 时间 频率

动画调用

<link rel="stylesheet" href="animate.css"/>
 <style>
        div{
            width:50px;
            height:30px;
            background: pink;
            color:#333;
        }
 </style>
 <div class="animated rotateInDownLeft">hello</div>