css文本属性及选择器

目录

一、文本属性——color

二、其他文本属性

1.text-align:文本的摆放位置

2.text-decoration:给文本增加一条线条 默认是没有的

3.text-transform:文本转换

4.text-indent:文本缩进

5.text-shadow:文本阴影

6.direction:文本方向

7.letter-spacing:控制字符与字符之间的间距

 8.word-spacing:控制单词与单词之间的间距

9. line-height:控制文字行与文字行之间的间距

三、选择器（基本选择器）

1.1 元素选择器（标签选择器）

1.2 类选择器

1.3 id选择器

1.4 通配符选择器（*）

2. 选择器的优先级  （！impotant） 优先级最高

四、伪类选择器——链接

五、结构伪类选择器（type child）

六、特定选择器

1.：only-child：匹配没有任何兄弟元素的元素

2.：only-of-type：代表了任意一个元素，这个元素没有其他相同类型的兄弟元素

3.：empty：没有任何内容和子节点

4.：root：控制整个页面

七、目标伪类选择器 :target

八、CSS复用选择器

1.交集选择器：

---

一、文本属性——color

(1)color-name

p{
    color: red;
}

(2)hex-number(#开头+6位数的取值)

————当16进制的颜色出现重复的时候可以省略 例如：ffffff=fff ffaabb=fab)

p{
    color: #ff0036;
}

（3）rgb(0-255,0-255,0-255)

rgba(0-255,0-255,0-255,0-1)最后一位为文字透明度

p{
    color: rgb(63, 35, 29)；
}

（4）hsl(hue, saturation, lightness);

p{
    color: hsl(hue, saturation, lightness);
}

二、其他文本属性

1.text-align:文本的摆放位置

（1）left靠左

text-align: left;

（2） right靠右

text-align: right;

（3）center居中

text-align: center;

（4）justify分散布局，需要设定宽高

width: 100px;
height: 100px;
text-align: justify;  

2.text-decoration:给文本增加一条线条 默认是没有的

（1）底部线

text-decoration:underline;

（2）头部线

text-decoration:overline;

（3）删除线

text-decoration:line-through;

3.text-transform:文本转换

（1）将文本转化为大写

text-transform: uppercase;

（2）将文本转化为小写

text-transform:lowercase;

（3）将单词的首字母转化为大写

text-transform: capitalize;

4.text-indent:文本缩进

  控制文本的首行距离（控制的是对应标签的首行文字 不是控制标签的距离）取值有：

  (1)数值：像素值（可以为负数，向左缩进）

  (2)百分比：基于父元素宽度的百分比的缩进

text-indent: 20px;

5.text-shadow:文本阴影

  h-水平方向上的移动距离

  v-垂直方向上的移动距离

  blur-模糊的程度

  color-颜色

text-shadow: 20px 50px 10px red;

6.direction:文本方向

  rtl:从右到左

  ltr:从左到右

direction: rtl;

7.letter-spacing:控制字符与字符之间的间距

  可以为负值，字符重叠

letter-spacing: 20px;

 8.word-spacing:控制单词与单词之间的间距

word-spacing: 20px;

9. line-height:控制文字行与文字行之间的间距

line-height: 50px;

注意：当line-height=父元素的高度时 单行文本会垂直居中。多行文本不适用

三、选择器（基本选择器）

补充：属性选择器

 

1.1 元素选择器（标签选择器）

标签名{
    font-size:20px;
}

1.2 类选择器

.top{
            color: red;
        } 
<p class="top">类选择器</p>

1.3 id选择器

#top{
            color: red;
        } 
<p id="top">id选择器</p>

1.4 通配符选择器（*）

*{
            color: red;
        } 

2. 选择器的优先级  （！impotant） 优先级最高

通配符选择器<元素选择器<class选择器 <id选择器< 行内样式<! important

若class选择器有多个name,就近优先

四、伪类选择器——链接

1.a:link：没有被访问的链接 默认为蓝色

a:link{
            color: rgba(206, 127, 131, 0.267);
        }

2.a:visited：被访问过的链接

a:visited{
            font-size: 100px;
        }

3.a:hover：鼠标滑过（不仅可以用在a标签，还可以用在其他标签上）

a:hover{
            color: darkgreen;
        }

4.a:active：点击

a:active{
            color: coral;
        }

此伪类选择器多用于a标签，a标签的伪类选择器时需要有顺序的：

        lovehate==>link visited hover active

input:focus  鼠标聚焦

input：focus{
            width: 1000px;
        }

五、结构伪类选择器（type child）

一、child共有四种类型。

        (1)其中书写顺序，可以从后往前书写。

        (2)查找顺序为：

child四种类型有

1. ：first-child:从上往下数第一个子类元素；
2. ：last-child:从上往下数最后一个子类元素；
3. ：nth-child(n):从上往下数第n个子类元素；
4. ：nth-last-child(n):从下往上数第n个子类元素。

二、type共有四种类型

        (1)其中书写顺序，可以从后往前书写。

        (2)查找顺序为：

type四种类型有

1. ：first-of-type:从上往下数第一个指定子元素标签；
2. ：last-of-type:从上往下数最后一个指定子元素标签；
3. ：nth-of-type(n):从上往下数第n个指定子类元素标签；
4. ：nth-last-of-type(n):从下往上数第n个指定子类元素标签。

六、特定选择器

1.：only-child：匹配没有任何兄弟元素的元素

p:only-child {
            color: yellow;
        }

2.：only-of-type：代表了任意一个元素，这个元素没有其他相同类型的兄弟元素

:only-of-type {
            color: cadetblue;
        }

3.：empty：没有任何内容和子节点

:empty {
            background-color: blue;
        }

4.：root：控制整个页面

：root{
            background-color: blue;
        }

七、目标伪类选择器 :target

：target：选择器用于选取页面中的某个target元素，锚点定位时，点击后改变目标元素的样式

 <a href="#t">点击</a>
    <h1 id="t">今天！</h1>

:target{
            font-size: 100px;
        }

八、CSS复用选择器

1.交集选择器：

交集选择器是并且的意思，即...又...的意思

（1）交集选择器需要两个选择器组成，

（2）且第一个必须为元素选择器，第二个为id或者class选择器，

（3）选择器之间不能有任何连接符。

<p>元素选择器</p>
<p class="one" >类选择器</p>
<p id="two" >id选择器</p>

p.one{
    color: red;
}

p#two{
    color: blue;
}