CSS样式的基础知识
来源:互联网 发布:网络春晚2016完整版 编辑:程序博客网 时间:2024/06/09 07:40
CSS样式的基础知识
1.CSS的简介:
CSS全称为“层叠样式表(Cascading Style Sheets)”,它主要是用于定义HTML内容在游览器的显示样式,如文本大小、颜色、字体加粗等。
如下列代码:
p{
font-size:12px;/*设置文字字号*/
color:red;/*设置文字颜色*/
font-weight:bold;/*设置字体加粗*/
}
2.CSS代码语法:
css样式由选择符合声明组成,而声明又由属性和值组成。
3.CSS的注释代码
用/*注释语句*/来表明
4.内敛式css样式:
内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码: <p style="color:red">这里文字是红色。</p>
5.嵌入式css样式
就是可以把css样式代码写在<style type="text/css"></style>标签之间。
6.外部式css样式
就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:
7.css的选择器:
每一条css样式声明(定义)由两部分组成,形式如下:
选择器{
样式;
}
8.类选择器
类选择器是css样式编码中最常用到的
.类选器名称{css样式代码;}
9.id选择器
#id名称{css样式代码;}
10.子选择器
即大于符号(>),用于选择指定标签元素的第一代子元素,如下列代码:
.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li(水果、蔬菜)加入红色实线边框。
11.包含(后代)选择器
包含选择器,即加入空格,用于选择指定标签元素下的后辈元素,如下列代码:.first span{color:red;}
总结:>作用于元素的第一代后代,空格作用于元素的所有后代。
12.通用选择器
通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素。,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色:* {color:red;}
13.伪类选择符
允许给html不存在的标签(标签的某种状态)设置样式,比如说给HTML中一个标签元素的鼠标滑过的状态来设置字体颜色:
a:hover{color:red;}
注意:关于伪类选择符,到目前为止,可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了
14.分组选择符
当你想在html中多个标签设置同一个样式时,可以使用分组选择符(,),如下代码为h1、span标签同时设置字体颜色为红色:
h1,span{color:red;}
- CSS样式的基础知识
- 关于CSS样式表的基础知识
- CSS样式基础知识
- CSS样式基础知识
- CSS 层叠样式表 基础知识
- CSS学习之样式表基础知识
- CSS(层叠样式表)基础知识
- CSS样式基础知识(前端基础篇)
- FLASH8的CSS样式
- Css的样式
- css连接的样式!
- 简单的css样式
- CSS常用的样式
- 常用的css样式
- 常用的css样式
- CSDN的CSS样式
- a 的CSS 样式
- css的简单样式
- oracleday18(数据类型记录变量 多个变量放一个自创的里面 )
- jQuery 遍历
- nodejs读写文件
- JavaScript indexOf() 方法
- Could not create the view: An unexpected exception was thrown.
- CSS样式的基础知识
- yii2项目实战-了解一下基于角色的访问控制
- Lua5.3 VM 分析(一)字节码运行
- JVM内存分配以及存储总结
- Lua5.3 VM 分析(二)表处理
- RCNN, Fast-RCNN, Faster-RCNN
- 《算法导论》第五章-第4节_练习(参考答案)
- 打扫房间的各种方法 —— Java虚拟机的垃圾收集算法清单
- 1037. 在霍格沃茨找零钱(20)