CSS基础知识(概念、块级元素、行内元素、选择器)
1、CSS概念
全称为Cascading Style Sheets(层叠样式表),支持专有的文件 - 扩展名为".css"
作用:将HTML的结构(HTML标签即html)与样式(显示的样式即css)进行分离
² CSS语法结构
语法格式:选择器{ 属性名称: 属性值; 属性名称: 属性值; }
² 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的选择器
² 常见选择器
- Ø ID选择器
通过 HTML 页面元素的id属性值进行定位,其语法结构为 #ID
- Ø 类(class)选择器
通过HTML页面元素的class属性值进行定位,语法结构为 .class
注:不能用纯数字或者数字开头来定义类名;不建议使用汉字来定义类名
- Ø 元素选择器
通过HTML页面元素的元素名进行定位,语法结构为 元素名
- Ø 属性选择器
通过 HTML 页面元素的属性进行定位,语法结构为 [属性名]。
【选择器的优先级:内联样式 > ID选择器 > 类选择器和属性选择器 > 元素选择器】
【!important - 将当前选择器的优先级别设置最高(打乱优先级别的顺序)---不建议使用】
² 关系选择器
- Ø 后代选择器
指根据目标元素匹配后代元素
格式:目标元素 后代元素 eg: #t1 div {color : red; }
- Ø 子元素选择器
指根据目标元素匹配子级元素
格式:目标元素 > 子元素 eg: #t1 > div {color : red; }
- Ø 相邻兄弟选择器
指根据目标元素匹配下一个相邻兄弟元素
格式:目标元素 + 下一个相邻兄弟元素 eg: #t1 + div {color : red; }
² 组合选择器
* 第一种 - 交集结果(多个选择器并列使用,中间没有任何分隔)
* 第二种 - 并集结果(多个选择器并列使用,中间使用" , "分隔)
u 通配符选择器(*)
作用:匹配当前 HTML 页面中的所有元素 eg: * {color:red;}
问题:匹配的速度不是很快(页面元素的数量和复杂程度)
CSS基础知识(概念、块级元素、行内元素、选择器)的更多相关文章
- css盒模型和块级、行内元素深入理解
盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...
- css盒子模型的深入理解,在块级、行内元素的区别和特性
css盒子模型用于处理元素的内容.内边距.边框和外边距的方式简称.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的 ...
- 3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922
1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P h1--h6 ul li ol li div h ...
- day001-html知识点总结(-)块级。行内元素区分
-.行内元素和块级元素的区别与转换: 区别: 1.从形式上看,在标准文档流中,行内元素会水平方向呈线性排列,而块级元素会各占一行,垂着方向排列. 2.在结构使用上,块级元素可以包含行内元素和块级元素, ...
- block与inline,inline和inline-block,块级和行内元素,行内替换和行内非替换元素
block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...
- 元素显示模式:块元素 & 行内元素 & 行内块元素
元素显示模式 前言 了解元素的显示模式可以更好的让我们布局页面.了解显示模式需要学习以下三个方面 什么是元素的显示模式 元素显示模式的分类 元素显示模式的转换 什么是元素显示模式 元素显示模式就是元素 ...
- css菜鸟学习之text-align属性,行内元素,块级元素居中详解
一.text-align属性 1.text-align用来设置元素中的的文本对齐方式,例如:如果需要设置图片的对齐方式,需要设置图片的父元素的text-align属性: 2.text-align只对文 ...
- css总结17:HTML块级元素&行内元素之分: <div> 和<span>
1 HTML 区块元素: 大多数 HTML 元素被定义为块级元素或内联元素. 1.1 块级元素实例: <div> <h1>, <p>, <ul>, &l ...
- HTML基础知识(块级标签,行内标签,行内块标签)
块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高! 其中还有一种结合两种模 ...
- HTML 块级元素 行内元素
块级元素 - block level element 总是在新行上开始: 高度,行高以及外边距和内边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度: 它可以容纳内联元素和其他块元素 如: ...
随机推荐
- C# Lock、Monitor避免死锁
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 【java提高】---ArrayList源码
ArrayList源码 一.定义 public class ArrayList<E> extends AbstractList<E> implements List<E& ...
- 【java】io流之字节流转为字符流:java.io.OutputStreamWriter和java.io.InputStreamReader
package 文件操作; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; impo ...
- OC学习10——内存管理
1.对于面向对象的语言,程序需要不断地创建对象.这些对象都是保存在堆内存中,而我们的指针变量中保存的是这些对象在堆内存中的地址,当该对象使用结束之后,指针变量指向其他对象或者指向nil时,这个对象将称 ...
- Git常用命令清单笔记
git github 小弟调调 2015年01月12日发布 赞 | 6收藏 | 45 5k 次浏览 这里是我的笔记,记录一些git常用和一些记不住的命令,这个笔记原本是基于 颜海镜的文章增加 ...
- c#发送get请求
c#发送get请求爬取网页 关键点:在控制台中发送一个get请求,将响应的内容写入文件流中保存html格式 static void Main(string[] args) { string url = ...
- bzoj 4569: [Scoi2016]萌萌哒
Description 一个长度为n的大数,用S1S2S3...Sn表示,其中Si表示数的第i位,S1是数的最高位,告诉你一些限制条件,每个条 件表示为四个数,l1,r1,l2,r2,即两个长度相同的 ...
- JavaScript连等赋值
最近探究js原理的过程中遇到了这个挺有趣的问题. 先贴代码: var a = {n:1} a.x = a = {n:2} alert(a.x) //undefined 在弄懂这个之前,我们先普及一个知 ...
- 【简单理解】gulp和webpack的区别
Gulp和Webpack的基本区别: gulp可以进行js,html,css,img的压缩打包,是自动化构建工具,可以将多个js文件或是css压缩成一个文件,并且可以压缩为一行,以此来减少文件体积,加 ...
- touch事件应用
js的touch事件,一般用于移动端的触屏滑动: $(function(){ document.addEventListener("touchmove", _touch, fals ...