CSS|Web前端入门之CSS基础笔记前端|css3

目录
001-HTML中嵌入CSS样式的第一种方式
002-HTML中嵌入CSS样式的第二种方式
003-HTML中嵌入CSS样式的第三种方式
004-隐藏样式
005-文本装饰样式
006-设置鼠标的悬停效果
007-内边距和外边距
008-float浮动效果
009-定位样式position

001-HTML中嵌入CSS样式的第一种方式

HTML中嵌入CSS样式的第一种方式：内联定义

文章图片

002-HTML中嵌入CSS样式的第二种方式

HTML中嵌入CSS样式的第二种方式：定义内部样式块对象/* 这是CSS的注释！！！！！！在CSS的地盘中，和java的注释相同！！！！ */ /* 这里应该怎么写样式，语法是什么？选择器 { 样式名 : 样式值; 样式名 : 样式值; 样式名 : 样式值; 样式名 : 样式值; 样式名 : 样式值; .... }CSS中常见的选择器包括：最常用的三种选择器。标签选择器 id选择器 class选择器 */ /* 标签选择器，很简单：标签名 {} */ div{ /* 作用于所有的div元素*/ background-color: aqua; width: 100px; height: 100px; border-color: red; border-style: solid; border-width: 10px; } /* ID选择器 #id{} 只作用于id这个元素 */ #username { width: 400px; height: 30px; border-color: black; border-style: solid; border-width: 1px; }/* 类选择器 .class {} 样式作用于当前网页中某一类的标签 */ .student { font-size: 12px; color: #FF0000; } 文本内容span文本内容：段落p标签

文章图片

003-HTML中嵌入CSS样式的第三种方式

HTML中嵌入CSS样式的第三种方式:链入外部样式表文件

文章图片

004-隐藏样式

隐藏样式#citysOfChina { display: none; /* 隐藏*/ }input { display: block; /* 显示*/ }ul { /* list-style-type: circle; */ list-style-type: none; }ol { /* list-style-type: none; */ list-style-type : upper-roman; } 水果蔬菜茶中国北京天津美国日本

文章图片

005-文本装饰样式

文本装饰样式#baidu { text-decoration : underline; /* text-decoration : overline; */ /* text-decoration : line-through; */ /* text-decoration : blink; */ }#baidu2 { text-decoration: none; } 百度百度

文章图片

006-设置鼠标的悬停效果

设置鼠标的悬停效果/* :hover 是专门用来设置鼠标悬停效果的 */ span:hover { color: red; font-size: 20px; }/* 注意：:hover在使用的时候，这个冒号两边都是不允许有空格的。 */ input:hover { border-color: black; } 我是一个段落我是一个段落

文章图片

007-内边距和外边距

内边距和外边距#div1 { width: 300px; height: 300px; background-color: #00FFFF; border: solid 1px red; /* 内补丁 */ padding-left: 20px; } #div2 { width: 100px; height: 100px; background-color: black; border: solid 1px red; /* 在div2这个节点顶部top打一个补丁，这个补丁离top 10px */ /* 外补丁 */ margin-top : 10px; }

文章图片

008-float浮动效果

float浮动效果img { float: right; } 文章图片《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。

文章图片

009-定位样式position

定位样式position#div1 { background-color: red; border: solid 1px black; width: 100px; height: 100px; /* 定位 */ position: absolute; top: 100px; left: 100px; }#baidu:hover { /* 变成小手 */ cursor: pointer ; /* 尽量不要使用hand，有浏览器兼容问题！*/ text-decoration: underline; color: blue; } 百度

鼠标移动至百度上的效果：