CSS引入、选择器、伪元素、文字/文本样式、背景以及显示模式和css特性

中枢叹号

已于 2022-10-19 15:58:57 修改

阅读量286

点赞数

文章标签： css html 前端

于 2022-10-17 17:08:23 首次发布

本文链接：https://blog.csdn.net/NewHouser/article/details/127298439

版权

一、CSS 引入方式

1、内嵌式

<head>
    ···
    <style>
    ···
    </style>
</head>

css放在head中，是因为浏览解析文档是自上而下的，如果放在底部，css渲染不及时，可能只能看见页面结构，而写在head中，可以避免页面闪烁

2、外联式

单独创建一个css文件，将css样式写在这个文件里，在通过使用<link>的方式引入到html文件中，引入的位置同样是在<head>中

<head>
    ···
    <link rel="stylesheet" href="./xx/xx.css">
</head>

3、行内式

直接将css写在需要改变样式的标签内部

<div style="color: red; font-size: 20px;">文字变色</div>

二、CSS 选择器

1、标签选择器

选择所有相同的标签，适用于需要所有相同标签的内容统一样式或者只有一个标签修改样式的情况

div{

}

2、类选择器

class类名不能以数字或者 “-” 开头，选择器前面有 .

.one{

}

---------------------------

//<div class="one">xxx</div>

3、id选择器

建议一个id名只绑定一个标签，以下面代码为例，已经有一个div标签的id是two，再来一个 p标签的id也是two，虽然也能显示样式效果，但是不合规矩

#two{

}

------------------------

//<div id="two">xxx</div>

4、通配符选择器

全选，一般用于清除一些默认的样式（比如内外边距）

*{
    margin: 0;
    padding: 0;
}

5、后代选择器

两个标签之间用空格隔开

div p{
    color:blue
}

-----------------------------------

<div>
   <p>这是div标签里面的p标签</p>
</div>

6、子代选择器

子代选择器只能间隔一代，用 > 隔开，如下代码只能选中 “A”，无法选中 “B”

.one>a {

}

------------------------------------------------

<div class="one">
    <a href="#">A</a>
    <p>
        <a href="#">B</a>
    </p>
</div>

7、并集选择器

每个标签之间用逗号隔开，建议一行写一个选择器，如下代码，提高代码的可读性

.one p,
div,
span{

}

------------------------------

<div class="one">
    <p>这是p标签</p>
    <div>这是div标签</div>
    <span>这是span标签</span>
</div>

8、交集选择器

在出现重复类型标签，且要选中其中之一时适用，如下代码，想要选中 “A” ，既不能直接用p标签，也不能用 .one 类名，所以就需要交集选择器，先选中所有p标签，再选中所有类名为 .one的标签，二者之间不用间隔开，即可选择既是p标签，又以 .one为类名的目标选项

p.one{

}

----------------------------

<p class="one">A</p>
<p>B</p>
<p>C</p>
<p>D</p>
<div class="one">E</div>

9、hover伪类选择器

hover伪类选择器，是指当鼠标悬停在某个标签内容上时，才会显示出来样式效果

.change:hover{
    color: red;
}

-----------------------

<div class="change">把鼠标移到我头上</div>

10、结构伪类选择器

可以理解为根据序号查找

li:first-child{}
匹配父元素中的第一个子元素

li:last-child{}
匹配父元素中的最后一个子元素

li:nth-child(n){}
匹配父元素中的第n个子元素

li:nth-last-child(n){}
匹配父元素中的倒数第n个子元素

-----------------------------------
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

上述代码中的 n ，填数字代表第 n 个元素，另外也可以填表述奇数个，偶数个等等格式，如下

偶数：2n、even

奇数：2n+1、2n-1、odd
前三个：-n+3
第三个往后：n+3

11、伪元素

伪元素是在某一个标签的前后添加一个由CSS模拟出来的标签，默认为行内元素，并且需要设置content属性才能生效。

1.因为伪元素默认是行内元素，无法设置宽高，转换成块级元素即可

2.content必须写，但content的属性可以不填，即 content：" ";

.real::before {
    content: "我是A前面的伪元素";
}
        
.real::after {
    content: "我是A后面的伪元素";
}

-------------------------------

<div class="real">A</div>

三、文字/文本样式

1、文字样式

/*字号*/
font-size: 30px;

/* 加粗 */
font-weight: 700;
font-weight: bold;

/* 不加粗 */
font-weight: 400;
font-weight: normal;

/* 倾斜 */
font-style: italic;

/* 字体 ：若没有  微软雅黑，则为 黑体，若无黑体，则显示任意一种非衬线字体*/
font-family: 微软雅黑, 黑体, sans-serif;

/*文字样式的属性连写（复合写法顺序：style、weight、size、family）*/
font: italic 700 66px 宋体

2、文本样式

2.1、text-indent 文本缩进

/* em:一个字的大小 */
text-indent: 2em;
text-indent: 15px;

2.2、text-align 文本水平对齐方式

图片元素或者文本元素需要给该元素的父元素设置 text-align

text-align: center;
text-align: left;
text-align: right;

2.3、text-decoration 文本修饰

//下划线
text-decoration: underline;

//删除线
text-decoration: line-through;
        
//上划线
text-decoration: overline;

//无装饰线（一般用于清除超链接的默认样式）
text-decoration: none;

2.4、line-height 行高

//值为数字+px，则行高为指定像素
line-height: 50px;

//值为数字，则行高为指定倍数
line-height: 1.5;   

//设置单行文字竖直居中
line-height = xxx

//xxx为自身的高度，比如前面设置了 height：100px，那么设置xxx为100px即可
//简单来说就是    行高属性值=自身高度属性值

2.5、复合写法：

font：style weight size/line-height family

例举如下：

font: italic 700 66px/2 宋体;

2.6、标签水平居中（一般用于有固定宽度的盒子，如果没有设置宽度，会占满父元素的宽度）：

margin: 0 auto;

四、背景相关

1、背景颜色 background-color

background-color: skyblue;                //颜色名称
background-color: rgba(0, 0, 0, 0.5);    //rgba   a：透明度
background-color: rgb(0,0,0);            //rgb
background-color: #f0f0f0;                //十六进制

2、背景图片 background-image

背景图片和 img 图片不一样，需要给父级盒子加上宽高才能显示出来

background-image: url(./xxx/xxx.jpg);

2.1、background-repeat 背景平铺

background-repeat: repeat;     //图片平铺，
background-repeat: no-repeat;    //不平铺: 图片只显示一个
background-repeat: repeat-x;     //沿x轴平铺，横着铺
background-repeat: repeat-y;     //沿y轴平铺，竖着铺

2.2、background-position 背景位置

        正数：向右向下

        负数：向左向上

        注意：如果图片放在一个盒子里，超出盒子范围的部分不会显示

background-position: right 0;         //右上角
background-position: right bottom;     //右下
background-position: center center;     //正中心
background-position: center;             //正中心
background-position: 50px 0;             //背景图向右移动50px，靠上
background-position: 50px 100px;        //向右50px，向下100px
background-position: -50px -100px;        //左50px，上100px

背景图片的属性复合写法（已下不分先后顺序）：

background：背景色背景图背景图平铺背景图位置

注意：背景图片位置如果都是英文单词（cente、left、bottom等等），可以不在意顺序，但如果是数字（比如50px 100px）则不能颠倒位置

//示例
background: pink url(./xxx/xx.jpg) no-repeat center bottom;

五、块、行内、行内块

块级元素：独占一行、默认宽度为父元素宽度、高度默认由内容撑开，可设置宽高

div、p、h、列表标签（ul、li……）、form······

行内元素：一行显示多个、宽高默认有内容撑开、无法设置宽高

a、span、b、u、i、s····

行内块元素：、一行可以显示多个、可以设置宽高

input、textrea、button、select······

三者之间的转换：

display：block 转换成块级元素
display：inline-block 转换成行内块元素
display：inline 转换成行内元素

六、CSS特性

1、继承性

子元素获得父元素的部分样式，通常父元素中关于文字的属性都能被子元素继承到，例如color、font-xxx、text-xxx等

注意：当使用拥有浏览器自带样式的标签时，例如<a>标签，浏览器默认自带颜色（一般是蓝色），此时继承不到父元素的color样式，<h1>~<h6>标题标签也一样，因为是标题标签，浏览器默认加粗加大，此时font-size无法被继承

2、层叠性

层叠性有两种，一种是叠加，另一种是覆盖，二者共同点是都作用在同一个标签上。但考虑层叠性之前，得先看优先级。

叠加：给一个标签加个颜色，再给它加个边框，那么这个标签既有颜色也有边框

覆盖：先一个标签加个红色，后给它加个蓝色，那么这个标签只显示蓝色

3、优先级判断

优先级的意思就像是，你妈喊你回家吃饭，朋友叫你喝酒掼蛋；老师让你门口罚站，国家让你当兵作战。那么根据优先级，最终肯定是去当兵作战。那么不同的选择器就像朋友或者老师有不一样的优先级，而高优先级的选择器所带的样式会覆盖低优先级选择器的样式。

优先级高低链：

! important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 继承样式

注意：给继承的样式加 !important ，优先级依然是最低的。且 !important 必须写在样式属性的后面，分号的前面，如下。

/*类选择器*/
.choose{
    color:red;
}

/*标签选择器*/
p{
    color:green;
}

/*id选择器*/
#box{
    color:yellow !important;
}

/*继承*/
div{
    color:pink;
}

-------------------------
//下面的style是行内样式
<div>
    <p class="choose" id="box" style="color: blue;">优先级</p>
</div>