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

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

 
0

CCS入门基础的更多相关文章

  1. mybatis入门基础(二)----原始dao的开发和mapper代理开发

    承接上一篇 mybatis入门基础(一) 看过上一篇的朋友,肯定可以看出,里面的MybatisService中存在大量的重复代码,看起来不是很清楚,但第一次那样写,是为了解mybatis的执行步骤,先 ...

  2. 01shell入门基础

    01shell入门基础 为什么学习和使用shell编程 shell是一种脚本语言,脚本语言是相对于编译语言而言的.脚本语言不需要编译,由解释器读取程序并且执行其中的语句,而编译语言需要编译成可执行代码 ...

  3. Markdown入门基础

    // Markdown入门基础 最近准备开始强迫自己写博文,以治疗严重的拖延症,再不治疗就“病入骨髓,司命之所属,无奈何”了啊.正所谓“工欲善其事,必先利其器”,于是乎在写博文前,博主特地研究了下博文 ...

  4. JavaScript入门基础

    JavaScript基本语法 1.运算符 运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运 ...

  5. C++ STL编程轻松入门基础

    C++ STL编程轻松入门基础 1 初识STL:解答一些疑问 1.1 一个最关心的问题:什么是STL 1.2 追根溯源:STL的历史 1.3 千丝万缕的联系 1.4 STL的不同实现版本 2 牛刀小试 ...

  6. HTML入门基础教程相关知识

    HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...

  7. Linux shell入门基础（六）

    六.Shell脚本编程详解 将上述五部分的内容,串联起来,增加对Shell的了解 01.shell脚本 shell: # #perl #python #php #jsp 不同的脚本执行不同的文本,执行 ...

  8. Linux shell入门基础（一）

    Linux shell入门基础(一): 01.增加删除用户: #useradd byf   userdel byf(主目录未删除)  userdel -r byf   该用户的属性:usermod 用 ...

  9. AngularJS入门基础PPT（附下载链接）

    学习了Angularjs有段时间,自己写了一个PPT,个人认为总结的非常全面,对于入门基础够了. 大致模块有:Angularjs简单介绍,Angularjs特性,hello world,Control ...

随机推荐

  1. （转自知乎https://www.zhihu.com/question/20794107）动态代理

    作者:雨夜偷牛的人链接:https://www.zhihu.com/question/20794107/answer/23330381来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...

  2. cs231n --- 3 : Convolutional Neural Networks (CNNs / ConvNets)

    CNN介绍 与之前的神经网络不同之处在于,CNN明确指定了输入就是图像,这允许我们将某些特征编码到CNN的结构中去,不仅易于实现,还能极大减少网络的参数. 一. 结构概述 与一般的神经网络不同,卷积神 ...

  3. eclipse 代码 editor 界面出现奇怪符号解决

    Preferences->General->Editors->Text Editors->去掉 Show whitespace characters->apply

  4. SPARQL查询语言

    SPARQL的查询是基于结构化知识的,变无序数据为有序知识,让计算机理解Web信息,即语义Web.现如今,语义网适用于各个领域,包括语义出版.语义知识库等.SPARQL是针对以RDF框架进行存储的知识 ...

  5. 大数据学习系列之七 ----- Hadoop+Spark+Zookeeper+HBase+Hive集群搭建 图文详解

    引言 在之前的大数据学习系列中,搭建了Hadoop+Spark+HBase+Hive 环境以及一些测试.其实要说的话,我开始学习大数据的时候,搭建的就是集群,并不是单机模式和伪分布式.至于为什么先写单 ...

  6. 探索C++对象模型

    只说C++对象模型在内存中如何分配这是不现实的,所以这里选择VS 2013作为调试环境具体探讨object在内存中分配情况.目录给出了具体要探讨的所有模型,正文分标题依次讨论.水平有限,如有错误之处请 ...

  7. Cat 客户端如何构建调用链消息树

    场景 & 代码 Inner0 中的某方法调用了 Inner1,代码 Inner1的代码很简单, Cat通过一个线程本地变量来保存调用链的相关信息,其中核心的数据结构是消息树和操作栈.消息树用来 ...

  8. 解析JSON的两种方法eval()和JSON.parse()

    解析JSON 一种方法是使用eval函数. var dataObj = eval("("+json+")"); 必须把文本包围在括号中,这样才能避免语法错误,迫 ...

  9. JQ 为未来元素添加事件处理器—事件委托

    随着DOM结构的复杂化和Ajax等动态脚本技术的运用,有了较多的动态添加进来的元素,直接用JQ添加click事件会发现新添加进来的元素并不能直接选取到,在这里就需要用到事件委托方法,JQ为事件委托提供 ...

  10. ASP.NET MVC框架开发系列教程

    本系列教程是自己在工作中使用到而记录的,如有错误之处,请给与指正 文章目录 MVC4 开篇 第一章 初识MVC4 第二章 下山遇虎(@helper) 第三章 Models模块属性详解 第四章 在MVC ...