您现在的位置:首页 >> 前端 >> 内容

css入门

时间:2017/6/7 10:34:36 点击:

  核心提示:css入门如果你已经有过html标签的过程,接下来必不可少的就是对html中的标签进行样式的修整,这些偏亮的样式就是要学习的css相关知识。css由一条或者多条以分号隔开的样式组成,每一个样式包括属性...

css入门

如果你已经有过html标签的过程,接下来必不可少的就是对html中的标签进行样式的修整,这些偏亮的样式就是要学习的css相关知识。
css由一条或者多条以分号隔开的样式组成,每一个样式包括属性和这些属性对应的值。
1 :使用css


我是一个段落

我是被修饰的段落

解释:上面的两个相同的p标签一个存在css样式,一个不存在css样式。
你可以编写在页面上查看这两句话的差别。在第二个标签:style表示行内样式属性,color表示段落字体颜色,font-size表示字体大小。

2:css使用的三种方式
2.1:元素内嵌样式
上面被修饰的p标签采用的就是元素内嵌样式
2.2:文档内嵌样式

下面代码采用的文档内嵌样式





我是一个段落

我是被修饰的段落

2.3:外部引用样式
外部应用需要建立扩展名为.css的文件,然后在html文档中使用link标签引入.css文件。
下面是.css文件中的代码style.css

@charset utf-8;
.p{
    color:red;
    font-size:50px;
}

然后是htmlin文档代码,该文档代码中引入该css样式文件





我是一个段落

我是被修饰的段落

3:css的层叠和继承
3.1:浏览器样式

我是加粗字体
我是平常字体

b标签本身就有加粗功能,在b标签内的文字是加粗过的样式。即使没有采用任何css进行修饰本身就有的功能简单来说就可以认为是浏览器样式
3.2:样式表层叠
样式表层叠通过五种方式进行,如果样式相同,那么比如会产生冲突替换。这时,它的优先级顺序就显的比较重要。以下优先级从低到高:
(1).浏览器样式(元素自身携带的样式);
(2).外部引入样式(使用link引入的样式);
(3).文档内嵌样式(使用style元素设置);
(4).元素内嵌样式(使用 style 属性设置)。
如果某一个样式被优先级高的给替换掉了,却又想执行这个样式方案,可以将这个方案
标记成重要样式(important)。
//强行设置最高优先级
color: green !important;
3.3:样式继承

Tags:CS SS S入 入门 
作者:网络 来源:qq_2859615