博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css练习
阅读量:4538 次
发布时间:2019-06-08

本文共 1415 字,大约阅读时间需要 4 分钟。

1. css概念:

一句话概括: 负责页面的美观(修饰)

html: 负责页面的结构
css: 负责页面的修饰
2)css的概述
css,cascading style sheet , 层叠样式表.
3)css如何使用:
css是在html的基础编写的。
css是浏览器解析的

2. 行内样式、内部样式、外部样式

1. 行内样式 

特点:

在标签内使用style属性,引入css内容
只能在当前标签中起作用

 

2. 内部样式

特点:

在当前html页面中<head>内使用<style>标签引入css内容
控制多个标签
html代码和css代码混杂!!

        

hello world1

hello world2

hello world3

hello world4

hello world5

hello world6

hello world7

 

3. 外部样式(推荐)

特点:

独立开发一个css文件,引入css内容。在html页面使用<link/>标签导入外部的css文件
控制多个标签
html代码和css代码分离!!!易于维护。

        

hello world1

hello world2

hello world3

hello world4

hello world5

hello world6

hello world7

 

优先级问题: 行内样式 >(优先) 内部样式和外部样式 (后面的生效)

 

3. css选择器(重点)

css语法组成部分:选择器 + css属性

a{ -- 选择器(selector)font-size:20px; -- css属性(name:value形式出现)color:red;}

什么是选择器? 使用选择器,选择到你希望添加样式的标签

1. 标签选择器

特点:
选择同名的标签

2. 类选择器

特点:
选择同类(同一个class属性值)的标签

3. id选择器

特点
只会选择一个特定id值的标签
注意 : id选择器通常只会需要一个html页面中一个特定标签,如果一个html页面中出现多个同id的标签,这样使用js代码去获取某个标签( document.getElementById("id值") ) 的时候会出问题 !!

优先级问题; id选择器 > 类选择器 > 标签选择器

4. 并集选择器

交集选择器

5. 通用选择器

6. 伪类选择器 

作用: 用于控制标签在不同状态下的样式
四种状态:
:link: 标签的原始状态
:hover: 标签的鼠标经过状态
:active: 标签被按下但没有松开的状态
:vistied: 标签被访问过的状态(被点过)

 

        
hello world1
hello world2
hello world3
hello world4
span1
hello world6
jump

 

转载于:https://www.cnblogs.com/maogefff/p/8689991.html

你可能感兴趣的文章
HDU5092——Seam Carving(动态规划+回溯)(2014上海邀请赛重现)
查看>>
java 格式化字符串
查看>>
[.Net]轻量ORM——Dapper
查看>>
语言基础
查看>>
C# : 操作Word文件的API - (将C# source中的xml注释转换成word文档)
查看>>
C#中字符串转换成枚举类型的方法
查看>>
psplash
查看>>
git的安装和简单使用
查看>>
Airplace平台
查看>>
TinyOS实例介绍
查看>>
我是怎么定义微服务平台?
查看>>
python random
查看>>
互联网技术
查看>>
input输入框只允许输入数字/ 数字+小数点/ 文字+字母/ 等解决方法
查看>>
【翻译】西川善司「实验做出的游戏图形」「GUILTY GEAR Xrd -SIGN-」中实现的「纯卡通动画的实时3D图形」的秘密,前篇(2)...
查看>>
函数名、闭包及迭代器
查看>>
mysql 5.6 参数详解
查看>>
求旋转数组的最小元素
查看>>
jQuery ajax error函数(交互错误信息的获取)
查看>>
Gson解析Json数组
查看>>