css基础-Treasure66530打卡01

Css使用方式

内联样式

<div style="width:100%;"></div>

内部样式

<style>
.css{margin:0;padding:0;}
</style>

外部样式

<link rel="stylesheet" href="css/css.global.css">
@import url(./css.css);

颜色表示法

单词表示法（color：yellow）
十六进制表示法（color：#333333）
RGB三原色表示法（范围0-255）（rgb（0，0，0））

CSS背景样式

background-color 规定要使用的背景颜色

background-position 规定背景图像的位置
值：x,y(top|center|bottom|left|right|百分率|px等)

background-size 规定背景图片的尺寸
值：length（设置宽高）|percentage（百分号）|cover（铺满）|contain（适应宽高）;

background-repeat 规定如何重复背景图像
值： repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复
repeat-y 背景图像将在垂直方向重复
no-repeat 背景图像将仅显示一次

background-origin 规定背景图片的定位区域
值： padding-box 背景图像相对于内边距框来定位
border-box 背景图像相对于边框盒来定位
content-box 背景图像相对于内容框来定位

background-clip 规定背景的绘制区域
值： border-box 背景被裁剪到边框盒。 测试
padding-box 背景被裁剪到内边距框。 测试
content-box 背景被裁剪到内容框。

background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动
值： scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动

background-image 规定要使用的背景图像
值： url(‘URL’) 指向图像的路径。
none 默认值。不显示背景图像。

复合样式：background:red url() repeat 0 0;（颜色 背景图 平铺方式 位置）

border样式

border-width
thin 定义细的边框
medium 默认。定义中等的边框
thick 定义粗的边框
length 允许您自定义边框的宽度(10px)

border-style
none 定义无边框。
hidden 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。

border-color:边框颜色

border-collapse
separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

CSS文字样式

font-family：字体

fotn-size：字体大小

font-weight：字体粗细（单词[normal正常、bold加粗]； 数字[100-500正常、600-900加粗]）

font-style：
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。

CSS段落样式

text-decoration：文本修饰
underline下划线
line-through删除线
overline上划线
none不添加任何修饰

text-transform：文本大小写
lowercase小写
uppercase大写
capitalize首字母大写

text-indent：文本缩进（单位em）

text-align：文本对齐方式
left默认
right
center
justify(两端点对齐，中间自行调节）

line-height:行高

letter-spacing:字间距

word-spacing:词间距（English）

word-break
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。

css选择器

ID选择器(#css{})

CLASS选择器(.css{})

标签选择器(p{})

群组选择器/分组选择器(div,p,span{})

通配选择器(*{})

层次选择器
后代选择器：选中.css元素内部后代所有p元素(.css p{})
子代选择器：选中.css元素内部子元素p(.css>p{})
兄弟选择器：选中.css元素后面的所有某一类兄弟元素p(.css~p{})
相邻选择器: 选中.css元素后面的某一个相邻的兄弟元素p(.css+p{})

属性选择器
div[class]{}
div[class][id]{}
div[class=box]{}
div[class*=search]{} //只要search在class中出现过都可以选中
=：完全匹配 *=：部分匹配 ^=:起始匹配 $=:结束匹配

伪类选择器
:link 访问前的样式（只能给a标签）
:visited 访问后的样式（只能给a标签）
:hover 鼠标移入时的样式（可以给所有标签）
:active 鼠标按下时的样式（可以给所有标签）
如果四个伪类都生效，顺序为：L V H A

伪元素选择器
div:after{content: ;color: }
div:before{content: }
:checked、:disabled、:focus 都是针对表单元素

结构性伪类选择器
:nth-of-type(){}、:nth-child(){} 角标从1开始，n值表示从0到无穷大即都被选中，隔行换色（2n）(2n+1)
选中第一项 :first-of-type{} :first-child{}
选中最后一项 :last-of-type{} :last-chile{}
只有一项的时候被选中 only-of-type{}

css浮动

float是魔鬼，会影响其他相邻元素；但是clear是小白，其只会影响自身，不会对其他相邻元素造成影响

clear语法：
clear : none | left | right | both
取值：
none : 默认值，不抗浮动
left : 左侧抗浮动
right : 右侧抗浮动
both : 两侧抗浮动

float语法：
clear : none | left | right
取值：
none : 默认值，不使用浮动
left : 左浮动
right : 右浮动