牢记内联式>嵌入式（嵌入式中设置各种文字字体、大小、位置、颜色、外距、内距最好用选择器）>外部式（外联式）的使用
属性和属性值
- font-family（字体）
- Microsoft Yahei||微软雅黑
- 宋体
- Arial
- Times New Roman
- font-size-adjust:修改字体怎么可以使文字大小不变，c=(a/b)s，s表示实际字号应该设置的大小，c表示原先字号大小，a表示实际使用的字体的aspect值，b表示原先使用的字体的aspect值
- font-size（字号）
- npx
- color（颜色）||background-color（背景颜色）
- red
- orange
- blue
- green
- yellow
- pink
- purple
- navy
- font-weight（设置字体的粗细）
- normal（正常，400）
- bold（粗体字符，700）
- bolder（更粗字符）
- lighter（更细字符）
- inherit（继承父元素）
- 100-900必须为100的整数倍
- font-variant（设置字体大小写）
- normal（默认）
- small-caps（使用小型大写字母）
- inherit（继承父元素）
- font-style（设置字体的样式）
- normal（正常）
- italic（斜体）
- oblique（倾斜体）
- inherit（继承父元素）
- text-transform（设置文字的大小写）
- capitalise（首字母大写）
- uppercase（全部大写）
- lowercase（全部小写）
- text-decoration（设置文字的装饰效果）
- underline（下划线）
- line-through（删除线）
- overline（上划线）
- text-indent（缩进），line-height（行间距，行高），
- nem
- letter-spacing(字母（汉字）间距)、word-spacing(单词间距)
- npx
- font-variant（字体缩写）
- small-caps
- text-align（位置）||margin-left(right):npx||padding-left(right):npx
- left
- center||0 auto;
- right
- justfify
- height||line-height(结合在一起可以设置垂直方向居中)
- npx
- npt
- nem
- nrem
- border
- solid（实线）
- dashed（虚线）
- dotted（点线）
- float（用于图片环绕）
- left
- right
- vertical-align（对齐方式）
- baseline
- top
- middle
- bottom
- text-bottom
- text-top
- text-sub
- text-super
- 长宽
- width
- height
- 背景图片
- background:url()
- background-image:url()
- 选择器
- [id$=\t]指定末尾字母为t的id，可用来判断文件格式
- [id^=t]指定id以t开头的id
- [id*=t]指定id中含有字母t的id
- 类选择器 .可以随意起名 t 元素.t
- 伪类选择器，已定义，不可随意起名，四个最基本的：root、not、empty、target；a:link、a.visited、a:hover、a.active、first-line（第一行）、first-letter（第一个字母或者第一个汉字）、before
- :enabled、:disabled
- :read-only附加说明readonly="readonly"、:read-write
- :check、:default、:indeterminate
- :selection
- 使用示例：
:root{background-color: yellow;}--将网页背景色设置为黄色body *:not(h1){background-color: yellow;}--在body内除h1元素外其他元素设置背景为黄色
:empty{background-color: yellow;}--设置内容为空时显示背景为黄色
:target{background-color: yellow;}--链接跳转到该元素时，背景设置为黄色 - :first-child、:last-child、nth-child(n||an+b||odd||even)、nth-last-child(n||an+b||odd||even)判断奇数偶数时连同其他元素一起判断，此时用下面的方法解决
- :nth-of-type(odd||even)、nth-last-of-type(odd||even)
- :odd :even :eq(n) :gt(n) :ln(n)
- :only-child代替:nth-child(1):nth-last-child(1)或:nth-of-type(1):nth-last-of-type(1)
- :hover移动到元素时、:active按下鼠标未松开时、:focus获得光标焦点时
- 通用兄弟元素选择器，用来某个元素之后的其它某个元素使用的样式，div ~ p
- 样式示例
- checkbox中outline:2px solid bule;
- radio中outline:2px solid bule;
- 使用选择器在界面中插入内容
- before、after中:content:""、none、normal
- 在文字后面添加图片：content:url()等效于background-image:url();background-repeat:no-repeat;padding-left:28px;
- 将alt属性的值作为图像的标题来显示：content:attr(alt);display:block;text-align:center;margin-top:5px;
- 在多个标题前加上连续编号：h1:before{content: counter(mycounter,upper-alpla)‘.‘;color:blue;font-size=10px;}h1{counter-increment: mycounter;counter-reset:subcounter;}
- 文字与字体相关样式
- 字体阴影：text-shadow:length length length color;
- 让文本自动换行：word-break:normal、keep-all、break-all;
- 让长单词与URL地址自动换行：word-wrap:normal、break-word;
- 使用服务器端字体：@font-face{font-family: WebFont;src: url(‘font/Fontin_Sans_R_45b.otf‘) format("opentype");font-weight: normal;}
- 盒相关样式
- display:inline||block||inline-clock（可以添加width和height）||inline-table||list-item||run-in||compact;
- overflow-x:hidden;overflow-y:scroll;overflow:auto||hidden||scroll||visible;text-overflow:ellipsis;
- box-shadow;box-sizing;
- 与背景和边框相关样式
- 指定背景显示范围：background-clip:border||padding;指定背景图像的绘制起点：background-origin:border||padding||content;background-size:npx mpx;前面加上-moz-或者-webkit-;background-break;在火狐浏览器中写成-moz-background-inline-policy:bounding-box||each-box||continuous;
- background-image;background-repeat;background-pisition;
- border-radius:指定一个半径||指定两个半径||指定不显示边框||指定修改边框||绘制四个角不同半径的圆角边框;前面加上-moz-或者-webkit-;
- 使用图像边框：border-image:url() A B C D（上右下左）/border-width repaat||stretch||round任选两个;前面加上-moz-或者-webkit-;
- 使用种类
- E——元素选择器
- E.C——类选择器
- E#ID——ID选择器
- E:A——含有A特性的E
- E F——E的后代节点F
- E.has(F)——含有F的E
- E>F——E的直接子节点F
- E+F——E的临近兄弟节点F
- E-F——E的任意兄弟节点F
- E.method(F)
- E[A]——带有特性A的E
- E[A=V]——A=V的E
- E[A^=V]——A以V开头的E
- [A*=V]——A含V的E
- E[A$=V]——A以V结尾的E
时间： 2024-08-03 19:23:51