内联样式:
在标签<>内设置 style 属性 color: red; 设置颜色为红色 font-size:99px; 设置字体大小为99个像素点
内嵌样式:
单独写一个<style>标签用 要设置的对象 p {}包裹设置内容</style>结束
外部样式,外联样式(link)
创建一个css文件设置属性
用link引入
<link rel="stylesheet" href="相对位置">
导入样式(不推荐使用)
@ import url{CSS文件位置}
CSS属性
width 宽度 height 高度 background-color 背景色 font-size 字体大小
选择器
标签选择器 通配符选择器 *{设置} ID选择器(不可以出现标签名不可重复) # id {设置} 类选择器 .class名称{设置}
(类属性可以有多个值)
复合标签 标签 。class名 标签下符合的类{设置} 。class 标签名 类下面符合的标签 {设置}
并集选择器 。类名 逗号 标签{设置} (符合条件的都设置)
子元素选择器 标签> 标签 {设置}标签下的都设置
属性选择器 标签[id][class]{设置}或者标签[属性=“属性值”](符合的才修改)
伪类选择器
:hover 用于有师表指针悬停于其上的元素
:active 应用于被激活的元素,如 被点击的链接、被按下的按钮等。
:visited 应用于已经被访问过的链接
:focus 应用于拥有键盘输入的焦点元素
伪元素 是控制标签内容
:first-line 设置第一个字符的设置
: first-letter 第一行 只能用于块级元素
:first-child 第一个子类
: before 之前 级别跟随使用对象
:after 之后
CSS优先级:
1、行内样式选择器
2、ID选择器
3、类选择器
4、标签选择器
Display 属性设置 :修改标签的显示模式
none: 此元素不进行显示(移除) /visibility:hidden是隐藏但是占用页面空间
block:此元素按块级元素显示 即:前后带换行符,自己独占一行,内联元素(块元素)
inline: 此元素按内联元素显示:一个挨着一个。块元素(内联元素)
inline-block:按行内标签进行排版 ,但是可以设置宽高
元素对比 宽高 边距 独占行
行内 X 左右边距 不独占
块级 √ 上下左右 独占
行内块 √ 左右边距 不独占
CSS的颜色设置:
1、按颜色名字命名。
2、RGB表示法:rgb(0,255,0) 或者RGB(100%,100%,0%) RGB(red,green,blue)
3、 十六进制表示:#号加三种颜色的值转换成十六进制表示
CSS的字号大小: font-size
绝对长度单位:
cm : 厘米 mm:毫米 in:英寸 pc:派卡
相对长度单位:
px: 像素点
em:1em等于当前字体的大小,例如当前元素的字体为14px那么1em=16px
单位之间的关系:
1in=2.54cm=25.4mm=96px
CSS的字体类型:font-family
CSS 空白符的处理 white-space
normal:默认的。。文本中的空格无效,满行后自动换行。
pre:预格式话,按文档书写的格式保留空格、空行。
nowrap:空格无效,强制文本不能换行,除非遇到br标签,否则即使超过边界也不换行, 若超出浏览器页面则增加滚动条。
text-indent: 首行缩进,设置段落首行文本的缩进,只能用于块级标签,建议用em作为设置单位。
word-break:自动换行
break-all 允许在单词内换行,拆分单词,节省空间
keep-all 除非遇到空格否则不换行
normal:使用浏览器默认规则
边框:border 粗细 样式 颜色
border-top
border-bottom
border-left
border-right 上下左右四天边框
在标签<>内设置 style 属性 color: red; 设置颜色为红色 font-size:99px; 设置字体大小为99个像素点
内嵌样式:
单独写一个<style>标签用 要设置的对象 p {}包裹设置内容</style>结束
外部样式,外联样式(link)
创建一个css文件设置属性
用link引入
<link rel="stylesheet" href="相对位置">
导入样式(不推荐使用)
@ import url{CSS文件位置}
CSS属性
width 宽度 height 高度 background-color 背景色 font-size 字体大小
position:
absolute; 可以层叠 relative 不层叠
absolute; 可以层叠 relative 不层叠
top:10px; 绝对位置
left:100px;
CSS各种对齐代码,左对齐、右对齐、中间对齐、底部对齐、两端对齐等
text-align
left:左对齐,默认的
right:右对齐
center:居中对齐
01 | /*CSS代码:*/ |
02 | /*左对齐*/ |
03 | . left { |
04 | text-align : left ; |
05 | border : 1px dotted black ; |
06 | width : 50% ; |
07 | } |
08 | /*右对齐*/ |
09 | . right { |
10 | text-align : right ; |
11 | border : 1px dotted black ; |
12 | width : 50% ; |
13 | } |
14 | /*居中对齐*/ |
15 | . center { |
16 | text-align : center ; |
17 | border : 1px dotted black ; |
18 | width : 50% ; |
19 | } |
20 | /*两端对齐*/ |
21 | . justify { |
22 | text-align : justify ; |
23 | border : 1px dotted black ; |
24 | width : 50% ; |
25 | } |
选择器
标签选择器 通配符选择器 *{设置} ID选择器(不可以出现标签名不可重复) # id {设置} 类选择器 .class名称{设置}
(类属性可以有多个值)
复合标签 标签 。class名 标签下符合的类{设置} 。class 标签名 类下面符合的标签 {设置}
并集选择器 。类名 逗号 标签{设置} (符合条件的都设置)
子元素选择器 标签> 标签 {设置}标签下的都设置
属性选择器 标签[id][class]{设置}或者标签[属性=“属性值”](符合的才修改)
伪类选择器
:hover 用于有师表指针悬停于其上的元素
:active 应用于被激活的元素,如 被点击的链接、被按下的按钮等。
:visited 应用于已经被访问过的链接
:focus 应用于拥有键盘输入的焦点元素
伪元素 是控制标签内容
:first-line 设置第一个字符的设置
: first-letter 第一行 只能用于块级元素
:first-child 第一个子类
: before 之前 级别跟随使用对象
:after 之后
CSS优先级:
1、行内样式选择器
2、ID选择器
3、类选择器
4、标签选择器
Display 属性设置 :修改标签的显示模式
none: 此元素不进行显示(移除) /visibility:hidden是隐藏但是占用页面空间
block:此元素按块级元素显示 即:前后带换行符,自己独占一行,内联元素(块元素)
inline: 此元素按内联元素显示:一个挨着一个。块元素(内联元素)
inline-block:按行内标签进行排版 ,但是可以设置宽高
元素对比 宽高 边距 独占行
行内 X 左右边距 不独占
块级 √ 上下左右 独占
行内块 √ 左右边距 不独占
CSS的颜色设置:
1、按颜色名字命名。
2、RGB表示法:rgb(0,255,0) 或者RGB(100%,100%,0%) RGB(red,green,blue)
3、 十六进制表示:#号加三种颜色的值转换成十六进制表示
CSS的字号大小: font-size
绝对长度单位:
cm : 厘米 mm:毫米 in:英寸 pc:派卡
相对长度单位:
px: 像素点
em:1em等于当前字体的大小,例如当前元素的字体为14px那么1em=16px
单位之间的关系:
1in=2.54cm=25.4mm=96px
CSS的字体类型:font-family
CSS 空白符的处理 white-space
normal:默认的。。文本中的空格无效,满行后自动换行。
pre:预格式话,按文档书写的格式保留空格、空行。
nowrap:空格无效,强制文本不能换行,除非遇到br标签,否则即使超过边界也不换行, 若超出浏览器页面则增加滚动条。
text-indent: 首行缩进,设置段落首行文本的缩进,只能用于块级标签,建议用em作为设置单位。
word-break:自动换行
break-all 允许在单词内换行,拆分单词,节省空间
keep-all 除非遇到空格否则不换行
normal:使用浏览器默认规则
边框:border 粗细 样式 颜色
border-top
border-bottom
border-left
border-right 上下左右四天边框
外边距 margin 内边距:padding