css的一些元素

在head里面

行内样式

在body里面

都写了一遍，要修改的话所有的都要改，工作量大

内部样式

在head里面

<style> p{ font-family: "宋体"; font-size: 30px; color: red; } </style>

外部样式：创建css文件

在html里面链接

——在head里面写

在css里面写：

p{ font-family: "宋体"; font-size: 30px; color: red; }

选择器

选择器{

属性：值：

属性值 1：值；

}

基本选择器

元素选择器

p{

    font-family: "宋体";

    font-size: 30px;

    color: red;

}

id选择器

id最好在行内写一个

class选择器

class可以写多个

属性选择器[]

不一定是class，属性可以自己造

[class]

[class=aa] 等于..

[class^=aa] 以...开头

[class$=aa] 以...结尾

[class*=aa] 包含...

特例：结合选择器

包含选择器

强调包含关系，div里的所有p

子选择器 强调父子关系

只有父子才行

选择器组合

“, “ 是 “或“ 的意思。

特例： *选择全部

伪元素选择器

首字母

div::first-letter{ }

首行

div::first-line{ }

认为英文单个字母没有意义，只认为单词有意义。连字符-或者空格可以换行

非要换的话：

div{

//单词裂开

word-break::break-all; //让每个元素自成体系

}

在元素前追加

div::before{

content:"内容"；

//作用于新加的元素

color：red;

background:yellow;

}

在元素后追加

div::after{

content:"内容"；

//作用于新加的元素

color：red;

background:yellow;

}

伪类选择器

结构性伪类选择器

nth-child(n) 只认数字,类型对就加上，不对就不给加样式

nth-child(n) 是 CSS 中的一个伪类，用来根据元素在其父元素中的位置来选择目标元素，其中 n 是一个表达式，用于定义要选择的子元素。

• n可以是数字（n从1开始）
• 单词（odd奇数/even偶数）
• 表达式（n从0开始）

nth-last-child() 倒着数

• n可以是数字（n从1开始）
• 单词（odd奇数/even偶数）
• 表达式（n从0开始）

nth-child(1) first-child 第一个

nth-last-child(1) last-child 最后一个

只认数字

ul li:nth-child(odd){

}

找同类型的第n个

nth-of-type(n)

• n可以是数字（n从1开始）
• 单词（odd奇数/even偶数）
• 表达式（n从0开始）

nth-last-of-type(n) 倒着数

• n可以是数字（n从1开始）
• 单词（odd奇数/even偶数）
• 表达式（n从0开始）

nth-of-type(1) first-of-type 第一个

nth-last-of-type(1) last-of-type 最后一个

ui状态伪类选择器

hover鼠标悬停状态

focus焦点状态

checked 选中状态

其他伪类选择器

not() 排除

• 设置不同样式，效果叠加；
• 设置相同样式看优先级：

        行内样式>内部样式 = 外部样式（看谁在前面）

        选择器优先级：

              

背景相关样式：

设置了不随页面而滚动，参考的就是整个界面了

可以直接堆砌，background：xxx xxx xxx ;

颜色的表示方式：

• 英文名称（表示范围有限，相似颜色无法准确表示出来）
• #+六位十六禁止的数据 0-f 000000-ffffff 红光 绿光 蓝光
  • 一种光 0-255
  • 一样的话可以写 #7bf
• rgb(red ,green,blue) 0-255 rgb(0 ,255,0)

        rgb(red ,green,blue,alpha) alpha 透明度0-1 只针对于背景颜色

        opacity:0; 透明度 0-1 针对整个元素透明

渐变 background：linear-gradient（角度，颜色，颜色...,transparent）

transparent 透明色

字体相关的样式

color 字体颜色

font 复合属性：

        font-size 字体大小

        font-weight 字体的粗细 100-900 变化不均匀

        font-family 字体样式

        font-style:italic 字体倾斜

text-decoration 文字的修饰线 none无修饰线 underline下划线 line-through中划线

text-align 控制文本的水平对齐方式 center水平居中

line-height 行高 只有一行的话可以垂直居中

定位

position：static

static：静态/常态模式

fixed：固定模式 不随浏览器的滚动而滚动，放弃掉自己原来的空间，参考物是浏览器

relative：相对模式 随浏览器的滚动而滚动，保留自己原来的空间，参考物是自己原来的位置

absolute：绝对模式 随浏览器的滚动而滚动，放弃自己原来的空间，参考物是浏览器（right top等的参考物）

父级元素relative，子集元素absolute：子集元素随浏览器的滚动而滚动，放弃自己原来的空间，参考物是父级元素

z-index 设置定位层级，值是整数，值越大越靠上层

hover 前面是鼠标指向哪，后面是变色部分