首页 > 其他分享> 文章详细

003-CSS属性

2019-12-01 15:53:13 阅读：163 来源： 互联网

标签：浏览器标签 003 1px 0px CSS 属性

CSS存放位置

CSS代码可以被我们放在很多的位置，已关心的有三种写法：内嵌CSS、外链CSS、行内CSS。

内嵌CSS：指的就是将CSS代码写在HTML网页中。

外链CSS：指的就是将CSS代码写在外部的独立CSS文件中。

行内CSS：指的就是将CSS代码写在具体的HTML标签身上。

注意：依据浏览器渲染页面的原理，我们选择将CSS代码写在HTML文件靠前的位置。

使用外链CSS写法的时候，外部独立的CSS代码文件当中不需要写style标签，同时还需要通过link标签将某个CSS文件引入带具体的HTML文件当中【rel属性对不要省略】

<link rel="stylesheet" type="text/css" href="目录CSS文件路径"/>

对于上述的三种CSS文件存放位置来说，行内CSS的权重是最高，但是外链与内嵌并不存在谁一定大于谁的现象（权重），它的控制能力完全取决于个字是用的选择器权重

如果想要直接将某一个样式的权重提至最高，我们只需要在该句CSS代码的最后设置！important

<style type="text/css">
　　div{
　　　　color: red!important;
　　}
</style>

1、音频标签

H5指的就是HTML5这个新的语言标准，在HTML5当中定义了一个audio的标签，可以直接引入一段声音资源到网页当中【audio标签用来定义一个声音资源模块】

1 默认情况下，引入的声音资源是不会自动播放的

2 HTML5定义了一个autoplay属性来设置自动播放【现在的浏览器都不支持】但是IE、火狐、edage浏览器可以支持，Chrome不支持

controls控制按钮、loop循环播放

autoplay,controls,loop都是属性名与属性值相同的标签，一般只写标签名

3 目前来说没有哪一种音频可以兼容所有的浏览器，因此我们在引入声音资源的时候就需要尽可能多的引入不同的格式，从而兼顾所有的浏览器为了结局这个问题，HTML5当中就定义了一个新的标签叫source

audio里边的文字在浏览器版本不能识别该标签的时候显示

<audio autoplay controls loop>
　　对不起，您的浏览器不支持该标签
   <source src="01.mp3"/>
   <source src="01.ogg"/>
</audio>

2、视频标签

vedio标签用来定义一个视频资源模块

1 默认情况下，引入的视频资源是不会自动播放的

2 HTML5定义了一个autoplay属性来设置自动播放【现在的浏览器都不支持】但是IE、火狐、edage浏览器可以支持，Chrome不支持

controls控制按钮、loop循环播放

autoplay,controls,loop都是属性名与属性值相同的标签，一般只写标签名

3 目前来说没有哪一种视频可以兼容所有的浏览器，因此我们在引入视频资源的时候就需要尽可能多的引入不同的格式，从而兼顾所有的浏览器为了结局这个问题，HTML5当中就定义了一个新的标签叫source

<video width="200" height="" autoplay controls loop>
　　<source src="02.mp4" type="video/mp4"></source>
　　<source src="02.ogg" type="video/ogg"></source>
　　<source src="02.webm" type="video/webm"></source>
　　当前浏览器不支持 video直接播放
</video>

3、常见的文字样式

1.行高：line-height，当我们将行高的大小设置成当前元素的高度是，可以实现单行文本在当前元素中垂直方向居中显示的效果。

2.水平对齐方式：text-align:left|center|right 分别表示设置文字在当前盒子当中水平的对齐

3.字体大小：font-size，单位是px，一般情况下浏览器都会有一个最小的显示字体

4.字体粗细：font-weight，可以设置关键字或数值（100~900），关键字有normal，bolder

5.字体名称：font-family，一般常用的就是“微软雅黑”“黑体”

6.字体颜色：color，可以设置颜色单词，还可以是十六进制的数

4、文字阴影

文字样缩写：font:文字粗细大小/行高字体

font: bold 100px/100px "微软雅黑";

文字阴影：text-shadow: 3px 3px 0px aquamarine;

第一个左右偏移，第二个上下偏移，第三个阴影模糊程度，第四个阴影颜色,允许给文字添加多重阴影，两组之间用逗号隔开，组内用空格隔开

凹文字：text-shadow: 1px 1px 0px white,-1px -1px 0px black;

凸文字：text-shadow: 1px 1px 0px black,-1px -1px 0px white;

eg：

<style type="text/css">
　　body{
　　　　background-color: grey;
　　}
　　div{
　　　　color: grey;
　　　　text-align: center;
　　　　font: bold 100px/100px "微软雅黑";
　　　　/*凸文字*/
　　　　text-shadow: 1px 1px 0px black,-1px -1px 0px white;
　　　　/*凹文字*/
　　　　text-shadow: 1px 1px 0px white,-1px -1px 0px black;
　　}
</style>

5、过渡属性

过渡属性的作用就是在元素的默认样式与最终样式之间产生的一个过程，在C3中新增了一个属性叫transition

transition: all 1.5s linear 0.2s;

第一个参数的表示设置在元素身上的哪些属性产生过渡，一般用all表示所有的属性都过渡。第二个参数表示过渡时间的长短。第三个参数表示匀速过渡。第四个表示过渡延时时间长短。1和3参数的单位s不能省略。

hover选择某个元素倍以上时的状态。

Transition这个属性既可以添加在元素默认状态，也可以添加在鼠标以上状态，区别就是第二种的做法在鼠标离开的时候不会有过渡变化。

6、CSS特性

1.在权重相同的情况下，同一个元素后写的CSS样式会覆盖先写的CSS样式

2.CSS的定义存在继承特点，子元素会继承父元素的一些样式

　　不是所有的CSS样式都能够被继承

　　不是所有类型的元素都会去继承祖先元素的样式（继承一般发生在块元素的身上）

　　继承就是指子元素可以继承祖先元素的一些样式

4. 不同选择器对同一个元素的CSS控制能力存在看强弱【优先级】

标签：浏览器,标签,003,1px,0px,CSS,属性
来源： https://www.cnblogs.com/qiuniao/p/11966059.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

003-CSS属性