1、CSS概念

全称为Cascading Style Sheets(层叠样式表)，支持专有的文件 - 扩展名为".css"

作用：将HTML的结构(HTML标签即html)与样式(显示的样式即css)进行分离

² CSS语法结构

语法格式：选择器{ 属性名称: 属性值; 属性名称: 属性值;}

² CSS 注释

用来解释代码，且可随意编辑它，浏览器会忽略它。格式：/* 内容 */

2、如何使用CSS

内联样式

通过HTML元素的style属性实现(

中)，即

注：HTML的结构与样式未有效分离，且这种CSS样式只针对当前元素有效

外联样式

a.在

元素定义

b.先定义CSS式的文件，后在HTML 页面中通过元素引入外部css文件

即

【注：内联样式的优先级别高于外联样式】

3、块级元素

概念: 独占页面中一行(下一个块级元素在新的一行)

、

【注：

标签中不能包含任何块级元素】

元素：本身不具备任何的含义作用。

作用：实现页面的布局(类似于

4、行内(内联)元素

概念: 不会独占一行(只占文本内容的区域)；如

、和等元素

注: 若在一行中不能容纳所有的元素，则会换到下一行，继续自左向右排列。

【一般都是块级元素中包含行内元素】

元素：本身不具备任何含义。特点：当行内元素占满页面的整个宽度，自动换行

eg:

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;}

问题:匹配的速度不是很快(页面元素的数量和复杂程度)

java的css的块_CSS基础知识（概念、块级元素、行内元素、选择器）相关推荐

HTML基础知识（一）：行内元素，块级元素，行内块元素
文章目录一.html元素分类二.块元素三.行内元素四.行内块元素五.替换元素和非替换元素六.元素转换七.总结一.html元素分类 html元素:行内元素.块元素.行内块元素二.块元素 ...
CSS 块元素,行内元素,行内块元素及元素之间转换
元素的显示模式元素一般分为块级元素和行内元素元素种类排列设置样式默认包含块元素独占一行可以设置宽高容器的100% 可以包含任何标签行内元素一行可以放多个行内样式不可直接设置宽 ...
CSS样式之块元素行内元素
一,常见的块元素块元素: 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常用于网页布局和网页结构的搭建. 常见的块元素有 h1~h6.p.div.ul.ol .li等 ...
块级、行内元素水平垂直居中方法
块级.行内元素水平垂直居中方法块级元素水平垂直居中 // 为目标元素设置以下属性 position: absolute; /*top: 0;*/ left: 0; right: 0; bottom: ...
html 标签（一）10个常用标签以及块元素行内元素、
目录一.标题标签六个标签标题常用的h1 到 h3 二 .段落标签 p 也是块元素 ,会独占一行三 hgroup 标题分组四 em strong都是强调标签五换行标签 br 自结束标签 ...
块元素行内元素行内块元素各自的特点
块元素行内块元素行内元素的特点. 一.块元素 block 自已独占一行. 宽度,高度,外边距,内边距都可以自己控制. 宽度默认为是父元素的100%. 是一个容器及盒子,里面可以放行内或者块元素. ...
专题 | 块级元素行内元素行内块元素
它们本身的宽度如何计算高度如何计算----当时的想法是? 以后补他们三个能否嵌套块级元素行内元素还有特殊的a标签块级元素块级元素高由内容撑起,宽默认100%,可以自己设置元素宽高. 块级元 ...
HTML基础，块级元素/行内元素/行内块元素辨析【2分钟掌握】
根据标签元素的特点可以将元素分为三类:块级元素,行内元素,行内块元素块级元素特点: 可以设定宽度和高度独自占用一行默认宽度是父元素的宽度,默认的高度是内容高度. 常见的块级元素有哪些?div p ...
php div行内块元素,行内元素与块级元素的区别详细介绍
首先,CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,分别为块级(block).行内(inline). 块级元素:(以下列举比较常用的块级元素,详 ...
超链接锚链接功能性链接块元素行内元素
目录超链接标签页面间的锚链接不同页面中的锚链接功能性链接行内元素和块元素超链接标签超链接的基本应用: 超链接包含两部分内容:1.是链接地址,可以是某个网址或文件的路径,对应为<a& ...

java的css的块_CSS基础知识（概念、块级元素、行内元素、选择器）

、

java的css的块_CSS基础知识（概念、块级元素、行内元素、选择器）相关推荐

最新文章

热门文章