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

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


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

HTML中嵌入CSS样式的第一种方式:内联定义 - 锐客网

CSS|Web前端入门之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标签












CSS|Web前端入门之CSS基础笔记
文章图片

003-HTML中嵌入CSS样式的第三种方式
HTML中嵌入CSS样式的第三种方式:链入外部样式表文件 - 锐客网

CSS|Web前端入门之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; }
  1. 水果
  2. 蔬菜
  • 中国
    • 北京
    • 天津
  • 美国
  • 日本

CSS|Web前端入门之CSS基础笔记
文章图片

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

CSS|Web前端入门之CSS基础笔记
文章图片

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

CSS|Web前端入门之CSS基础笔记
文章图片

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; }

CSS|Web前端入门之CSS基础笔记
文章图片

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

CSS|Web前端入门之CSS基础笔记
文章图片

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; } 百度

鼠标移动至 百度 上的效果:
CSS|Web前端入门之CSS基础笔记
文章图片





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










    推荐阅读