CSS基础知识(概念、块级元素、行内元素、选择器…
2018-06-24 02:11:01来源:未知 阅读 ()
1、CSS概念
全称为Cascading Style Sheets(层叠样式表),支持专有的文件 - 扩展名为".css"
作用:将HTML的结构(HTML标签即html)与样式(显示的样式即css)进行分离
2 CSS语法结构
语法格式:选择器{ 属性名称: 属性值; 属性名称: 属性值; }
2 CSS 注释
用来解释代码,且可随意编辑它,浏览器会忽略它。 格式:/* 内容 */
2、如何使用CSS
- 内联样式
通过HTML元素的style属性实现(<body>中),即<p style="css属性 : css属性值">
注:HTML的结构与样式未有效分离,且这种CSS样式只针对当前元素有效
- 外联样式
a.在 <head> 元素定义 <style>元素,即 <style type="text/css">
选择器{属性名 : 属性值 }
</style>
b.先定义CSS式的文件,后在HTML 页面中通过<link>元素引入外部css文件
即<link href="css文件路径" rel="文件类型,其固定值是stylesheet" type="text/css" />
【注:内联样式的优先级别高于外联样式】
3、块级元素
概念: 独占页面中一行(下一个块级元素在新的一行)
*<h1>、<p>、<ul>和<table>等元素,具有良好的语义化 (具体的元素具有具体的含义)
【注:<p>标签中不能包含任何块级元素】
*<div>元素:本身不具备任何的含义作用。 <div></div>必须设置高度,否则无法显示
作用:实现页面的布局(类似于<table>表格元素)
4、行内(内联)元素
概念: 不会独占一行(只占文本内容的区域); 如<td>、<a>和<img>等元素
注: 若在一行中不能容纳所有的元素,则会换到下一行,继续自左向右排列。
<a>标签中不能包含<a>标签,但可以包含其他任何元素
【一般都是块级元素中包含行内元素】
<span>元素:本身不具备任何含义。特点:当行内元素占满页面的整个宽度,自动换行
eg: <span></span>
<span></span>
eg: <span></span><span></span>
5、CSS的选择器
2 常见选择器
- ? ID选择器
通过 HTML 页面元素的id属性值进行定位,其语法结构为 #ID
- ? 类(class)选择器
通过HTML页面元素的class属性值进行定位,语法结构为 .class
注:不能用纯数字或者数字开头来定义类名;不建议使用汉字来定义类名
- ? 元素选择器
通过HTML页面元素的元素名进行定位,语法结构为 元素名
- ? 属性选择器
通过 HTML 页面元素的属性进行定位,语法结构为 [属性名]。
【选择器的优先级:内联样式 > ID选择器 > 类选择器和属性选择器 > 元素选择器】
【!important - 将当前选择器的优先级别设置最高(打乱优先级别的顺序)---不建议使用】
2 关系选择器
- ? 后代选择器
指根据目标元素匹配后代元素
格式:目标元素 后代元素 eg: #t1 div {color : red; }
- ? 子元素选择器
指根据目标元素匹配子级元素
格式:目标元素 > 子元素 eg: #t1 > div {color : red; }
- ? 相邻兄弟选择器
指根据目标元素匹配下一个相邻兄弟元素
格式:目标元素 + 下一个相邻兄弟元素 eg: #t1 + div {color : red; }
2 组合选择器
* 第一种 - 交集结果(多个选择器并列使用,中间没有任何分隔)
* 第二种 - 并集结果(多个选择器并列使用,中间使用" , "分隔)
u 通配符选择器(*)
作用:匹配当前 HTML 页面中的所有元素 eg: * {color:red;}
问题:匹配的速度不是很快(页面元素的数量和复杂程度)
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:CSS布局技巧之——各种居中
下一篇:表单提交post和get方法区别
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash