JavaWeb：CSS层叠样式表

层叠样式表

CSS将网页内容和显示样式进行分离，提高了显示功能。

HTML和CSS的结合方式

1.在每个html标签上面都有一个属性 style，把css和html结合在一起

<div style="background-color:red;color:green;">

2.使用html的一个标签实现 <style>标签，写在head里面

<style type="text/css"> div {background-color:blue;color: red;}
</style>

3.在style标签里面使用语句（在某些浏览器下不起作用）@import url(css文件的路径);

<style type="text/css">@import url(div.css);
</style>

4.使用头标签 link，引入外部css文件

<link rel="stylesheet" type="text/css" href="css文件的路径" />

第3种结合方式，缺点：在某些浏览器下不起作用，一般使用第四种方式

样式优先级

由上到下，由外到内。优先级由低到高。后加载的优先级高

代码规范

格式

选择器名称 { 属性名:属性值;属性名:属性值;...
}

基本选择器

选择器：要对哪个标签里面的数据进行操作

标签选择器

使用标签名作为选择器的名称

div {background-color:gray;  color:white;
}

class选择器

每个html标签都有一个class 属性

<div class="haha">aaaaaaa</div>

.haha {background-color: orange;
}

id选择器

每个html标签上面有一个id属性

<div id="hehe">bbbbb</div>

#hehe {background-color: #333300;
}

优先级

style > id选择器 > class选择器 > 标签选择器

扩展选择器

关联选择器

<div><p>hello</p></div>

设置div标签里面p标签的样式，嵌套标签里面的样式

div p { background-color: green;
}

组合选择器

<div>1111</div>
<p>22222</p>

把div和p标签设置成相同的样式，把不同的标签设置成相同的样式

div,p {background-color: orange;
}

伪元素选择器

浏览器的兼容性比较差，css里面提供了一些定义好的样式，可以拿过来使用，比如超链接的状态

原始状态:link
鼠标放上去状态:hover
点击:active
点击之后:visited

JavaWeb：CSS层叠样式表相关推荐

css层叠样式表（一）
今天研究了下css.这东东入门不算难.可是想写出好的样式就得有很深的功底了.按照老大给网址,12天学会网页设计.做下总结吧.css通过div(层)来定位,通过层的margin,padding,bord ...
第四章css总结,第四章CSS层叠样式表分析.doc
第四章CSS层叠样式表分析第章CSS层叠样式表CSS的" " color=" ">这样的标签以及与标签搭配的显示属性(如"background ...
css:层叠样式表(全)
css:层叠样式表 (Cascading Style Sheets),定义如何显示 HTML 元素,解决了内容与表现分离的问题,通常存储在css文件中. 目录: css属性,继承,引用等选择器盒模 ...
css层叠样式表——css基础介绍
css层叠样式表第一天 css层叠样式表01 css层叠样式表第一天 css介绍 css语法 html标签全局属性引入css样式的方式知识点应用 css介绍 css是Cascading Style ...
css层叠样式表、基本选择器
文章目录系列文章目录前言一.css层叠样式表 1.css组成 2.css引入方式 3.文字样式 4.文本属性二.选择器 1.基本选择器 2.最高样式引入 3.伪链接选择器 4.伪结构选择器 5 ...
Css3学习日志 --css层叠样式表
学习目标: 掌握css层叠样式表基础教程 CSS语法.选择器.字体样式.边框.背景.图片格式详解学习内容: css样式规则基本语法: A{属性:值; 属性:值; } 1.选择器用于指定css样式作 ...
CSS：CSS层叠样式表的概述
CSS层叠样式表:Cascading Style Sheets 介绍: 现代网页的设计原则是内容和样式分离,降低它们之间的直接相互依存关系,解耦性,同时,同样的内容,可以通过不同的CSS样式表现出来. ...
4.CSS层叠样式表一
CSS层叠样式表目标能够说出什么是CSS 能够使用CSS基础选择器能够设置字体样式能够设置文本样式能够说出CSS的三种引入方式能够使用Chrome调试工具调试样式 1.CSS简介 CSS: ...
javascript css(层叠样式表)
css层叠样式表(用来装饰网页界面) js代码操作css css代码目录 css层叠样式表(用来装饰网页界面) js代码操作css css代码在style(样式)里面进行操作案例在style(样 ...
HTML之CSS层叠样式表
一.CSS层叠样式表概述 CSS :层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件 ...