第三阶段 04_JavaWeb基础_CSS介绍

CSS介绍

1.什么是CSS？

　　CSS（Cascading Style Sheet，层叠样式表）是由W3C的CSS工作组创建和维护的。。。。。。想要了解CSS的介绍内容，自行百度。主要功能就是让HTML页面展示的更加美观。

 

2.CSS的优点

　　1.表现和内容分离

　　   2.易于维护和改版

　　   3.缩减页面代码，提高页码的浏览速度

　　　4.结构清晰，容易被搜索引擎搜索到

 

3.CSS的注释

　　/*    */  中间存放被注释的内容

 

4.CSS的使用

　　　A:内联样式格式：<标签 sytle="属性：属性值; 属性：属性值...">

　　　　　例：<p style="font-size:18px; color:red">

　　　　B:内部样式表：

　　　　　(1)内部样式表格式

　　　　　　<style type="text/css">

　　　　　　　　选择符1{属性：属性值;属性：属性值....}

　　　　　　　　选择符2{属性：属性值;属性：属性值....}

　　　　　　　　　......

　　　　　　</style>

　　　　(2)组合选择符的格式

　　　　　<style type="text/css">

　　　　　　　    选择符1，选择符2，....,{属性：属性值;属性：属性值....}

　　　　　　  </style>

　　　C:链入外部样式表

　　　　　　(1)<link>标签链接样式表文件

　　　　　  <link rel="stylesheet" href="外部样式表文件名.css" type="text/css">　　

　　　    （2）import

　　　　　  <style type="text/css">

　　　　　　　　@import url("外部样式表的文件名1.css");

　　　　　　　　......

　　　　　 </style>

5.CSS的选择器

　　要想将CSS样式应用用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式的样式规则部分称位选择器

　　（1）元素选择器

　　　　标记选择器是指用HTML标记名称作为选择器，按标志记名称分类，格式如下

　　　　标记名{属性1：属性值；属性2；属性值；}

　　　　例：

　　　　　　h1{

　　　　　　　　color:red;

　　　　　　　　font-size:100px;

　　　　　}

　　(2)id选择器

　　　　　id选择器使用"#"进行标识，后面紧跟id名，其基本语句如下：

　　　　　　　　　#id{属性1：属性值;属性2：属性值}

　　　　例：

　　　　　<style type="text/css">

　　　　　　#demo1{

　　　　　　　　color:red;

　　　　　　}

　　　　　</style>

　　　　　<h1 id="demo1">HelloWorld</h1>　　

　　(3)类选择器

　　　　　　类选择器使用"."（英文点号）进行标识，后面紧跟类名，格式如下：

　　　　　　　　　　　　　.类名{属性1：属性值；属性2：属性值}

　　　　　例：

　　　　　　.myClass{

　　　　　　　　font-size:100px;

　　　　　　}

　　　　　<h1 class="myClass">HelloWorld</h1>

　　  (4)属性选择器

　　　　　　在标签后使用中括号标记，格式如下：

　　　　　　　　　　　　标签名[标签属性="标签属性值"]{属性1：属性值}

　　　　例：

　　　　　　<style>

　　　　　　　　input[type="text"]{

　　　　　　　　　　background-color:yellow;

　　　　　　　　}

　　　　　　</style>

　　　(5)包含选择器

　　　　　　包含选择器，两个标签之间使用空格，给指定父标签的后代设置样式，格式如下：

　　　　　　　　父标签 后代标签{属性1：属性值;.....}

　　　　　例：

　　　　　　　<style>

　　　　　　　　　　#di div{

　　　　　　　　　　　　color:red;

　　　　　　　　　　}

　　　　　　　</style>　

 

总结：　

　　　主要讲解了什么是CSS，CSS的使用，以及CSS的选择器，常用的是前3个，后2个了解即可，写的不是很好，希望谅解，下一篇博客讲解CSS的样式　　　　　　　　　　　　　　

转载于:https://www.cnblogs.com/BaiZe258/p/9224055.html