码迷,mamicode.com
首页 > Web开发 > 详细

css

时间:2020-06-25 09:50:50      阅读:79      评论:0      收藏:0      [点我收藏+]

标签:red   span   区别   html标签   图片   收录   分离   方式   src   

概念:

表现HTML或XHTML文件样式的计算机语言

包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

CSS的优势

内容与表现分离
网页的表现统一,容易修改
丰富的样式,使得页面布局更加灵活
减少网页的代码量,增加网页的浏览速度,节省网络带宽
运用独立于页面的CSS,有利于网页被搜索引擎收录

CSS基本语法结构

选择器{
    声明1;
    
    声明2;
}

style标签

<style type="text/css">
h1 {
    font-size:12px;
    color:#F00;
}
</style>

HTML中引入CSS样式

行内样式 使用style属性引入CSS样式

示例:

<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

内部样式表 CSS代码写在<head>的<style>标签中

<style>
        h1{color: green; }
</style>


/*优点
方便在同页面中修改样式
缺点
不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底
*/

外部样式表

CSS代码保存在扩展名为.css的样式表中 HTML文件引用扩展名为.css的样式表,有两种方式

链接式 导入式

链接外部样式表

<head>
  ……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>

外部样式表 导入外部样式表

<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>

链接式与导入式的区别

<link/>标签属于XHTML,@import是属于CSS2.1
使用<link/>链接的CSS文件先加载到网页当中,再进行编译显示
使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中
@import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的

CSS样式优先级:

行内样式>内部样式表>外部样式表

CSS3基本选择器:

标签选择器 类选择器 ID选择器

示例:
p { font-size:16px;}//标签


.class { font-size:16px;}//


#id { font-size:16px;}//Id

/*
标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次
*/

优先级:
ID选择器>类选择器>标签选择器
 

CSS的高级选择器:

层次选择器 结构伪类选择器 属性选择器

层次选择器

技术图片

 

 

结构伪类选择器

技术图片

 

 属性选择器

技术图片

 

css

标签:red   span   区别   html标签   图片   收录   分离   方式   src   

原文地址:https://www.cnblogs.com/bokedizhi97/p/13190962.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!