Web基础之CSS(一)
来源:互联网 发布:python视频教程哪家好 编辑:程序博客网 时间:2024/06/06 12:57
css作用:早期,依靠HTML元素的属性设置样式,比如:border/align;而每个元素的属性不尽相同,所以样式设置比较混乱;因此,W3C推出了一套标准:使用某种样式声明后,所有的元素通用,即CSS产生,它是对页面的样式进行统一的定义(声明)的。
CSS概念:
+ CSS(Cascading Style Sheets):层叠样式表,又叫级联样式表,简称样式表;
+ 用于HTML文档中元素的定义
+ 实现了将内容与表现分离
+ 提高了代码的可重用性和可维护性
CSS基础语法:
+ 由多个样式规则 组成,每个样式规则有两个部分: 选择器和声明
—>选择器:决定哪些元素使用这些规则
—>声明:由一个或多个属性/值组成,用于设置元素的外观表现;
*CSS 使用
一共有三种使用方式:内联样式、内部样式表、外部样式表
*内联样式:定义在单个HTML元素中;不需要定义选择器,也不需要大括号{},只需要将分号隔开的一个或多个属性/值对,作为元素的style的值;如:
<h1 style=“background-color:silver;color:blue”>文本</h1>
- 内部样式表:定义在HTML页的头元素中;位于头元素的
<head><style type="text/css">h1{ color:green; } </style></head> <body><h1>文本</h1></body>
[注意:<style>中的属性 <type=“text/css”>可省略;且<style>元素里的注释要用css规定的/**/来注释,而不是HTML里的<!— —>]
- 外部样式表:定义在一个外部的CSS文件中(.css文件);由HTML页面引用样式表文件;
—> 一个纯文本文件;
—> 该文件中只能包含css样式规则;
—> 文件后缀为.css;
使用 <link>元素链接需要的外部样式表文件。如:
myStyle.css文件: h1{ color:green; } p{ background-color;silver;color:blue; } html文件里的<head>元素: <head><link rel="stylesheet" type="text/css" href="myStyle.css" /> </head>
[注意:rel:表示做什么用;href:表示引入的文件路径;type:引入文件类型,text/css表示纯文本的CSS代码];
** 三种使用方式的区别:
1)内联样式:将样式定义在元素的style属性里;但没有重用性。
2)内部样式表:将样式定义在元素里的
.myClass{ background-color:pink;font-size:35pt; }<h2 class="myClass">h2中的文本</h2><p class="myClass">p中的文本</p>
[注意:html文件中,所有元素都有一个class属性,如<p class=“name”></p>;
类选择器还有一种用法:
则样式d1和s1共同起作用]3)分类选择器 div.class
将类选择器和元素选择器结合起来使用,以实现同一类元素不同样式的细分控制。如元素,双有按钮又有文本时,可采用分类选择器,如:
p.myClass{ color:red;font-size:20pt } <h2 class="myClass">h2中的文本</h2> <p class="myClass">p1中的文本</p> <p>p2中的文本</p>
4)元素id选择器 #id
以某个元素id的值作为选择器。比较特殊的、页面整体结构的划分一般使用id选择器
+ 语法:定义id选择器时,选择器前需要有一个”#”号。选择器本身则为文档中某个元素的id属性;如:
#header{ color:red;background:yellow; } <h1 id="header">This is Title<h1>
[注意:html文件中,所有元素都一个id属性。且某个id选择器仅使用一次]
5)派生选择器 h1 span (包含/后代选择器)
依靠元素的层次关系来定义。某一包含元素下的一些相同子元素使用派生选择器
+ 语法:通过依据元素在其位置的上下文关系来定义样式,选择器一端包括两个或多个用空格分隔的选择器。如:
h1 span{color:red;}<h1>This is a<span>important</span>heading</h1>
6)选择器分组 h1,p,div
对某些选择器定义一些统一设置(相同的部分)
+ 语法:选择器声明为以逗号隔开的元素列表,如:
h1,p,div{ border:1px solid black;}
7)伪选择器 a:link
用于向某些选择器添加特殊的效果
+ 语法:使用冒号 :作为结合符,结合符左边是其他选择器,右边是伪类。
+ 常用伪类:有些元素有不同的状态,典型的如<a>元素
* link:未访问链接 *active:激活 *visited:访问过的链接 *focus:获得焦点
* hover:悬停,鼠标移入,所有元素都能用
如:
a:link{ color:black;font-size:15pt; } a:visited{ color:pink;font-size:15pt; } a:hover{ font-size:20pt; }
8)子选择器 .class>div
用于指定标签元素第一代子元素。只作用于第一代后代;
+语法:使用>作为连接符,连接类名及标签名。如:
.first>span{border:1px solid red;}
9)通用选择器
作用是匹配html中所有标签元素。
+语法:使用一个 * 表示,如:*{color:red;}
*选择器优先级(每种选择都有其权值,优先级就是对其权值的比较)
+ 基本规则:内联样式 > id选择器 > 类选择器 > 元素选择器
+ 优先级从低到高:
div < .class < div.class < #id < div#id < #id.class < div#id.class
!important : 设置选择器的权值为最高,即优先级最大。
如:p{color:red!important;} /则不管后面的设置都会为红色/
id选择器与类选择器的区别:
—> id选择器在一个HTML中只能使用一次;若使用两次则会出错;而类选择器.class可以使用多次;
—> 可以使用类选择器列表为同一个元素设置多个样式,而id不能。如class=“stress bigsize”;
博客地址:Web基础之CSS(一)
- Web基础之CSS(一)
- WEB基础之:CSS
- Web基础之CSS(二)
- WEB程序设计之CSS(一)
- Web基础之HTML + CSS
- Web基础之CSS入门
- Web基础之CSS实战
- Web前端总结-----CSS基础详解(一)
- Web基础之JavaScript(一)
- Web基础之jQuery(一)
- CSS基础(一)
- CSS基础(一)
- CSS基础(一)
- CSS基础(一)
- 读书笔记--精通CSS高级Web标准解决方案(二)---CSS基础之CSS选择器
- 读书笔记--精通CSS高级Web标准解决方案(一)---CSS基础
- 精通CSS:高级web标准解决方案之读书笔记(一)
- Web学习篇之---css基础知识(一)
- linux如何添加新网卡并修改网卡配置文件
- hadoop文件压缩格式
- opengl深度缓冲区
- Mockito 中捕获 mock 对象方法的调用参数
- Android Camera2 (Android5.0新特性)
- Web基础之CSS(一)
- Hololens——视频播放
- ubuntu16.04安装搜狗输入法+Chrome+XX-net+wingid+jdk+eclipse+R
- 1、swift开发iOS——基础
- Linux下安装mysql以及配置JDBC驱动
- web前端布局练手项目
- 斯特林数
- 关于PING++支付宝与百度定位/地图冲突
- 评价分类器的性能