CSS基础

Posted 2022-09-17 sauronblog

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS基础相关的知识，希望对你有一定的参考价值。

1.背景透明

background-color:rgba(0,0,0,.2)

2.背景大小

background-size:

取值：可以是像素单位，也可以是百分比

<style>
    .box 
      width: 600px;
      height: 600px;
      border: 1px solid blue;
      /* background-image: url(./images/l.jpg) */
      background: url(./images/l.jpg) no-repeat;
      /* background-size: 300px;   只有一个值的时候，表示设置的宽度，但是高度也会随时一块等比例缩放 */
      /* background-size: 300px 500px;  两个值的时候，第一个表示宽度，第二个表示高度 */
      /* background-size: 50%;   图片要跟着盒子的宽度来设置百分比 */
      /* background-size: cover;    铺满整个盒子，是等比例进行缩放铺满的，如果有溢出，则会将溢出隐藏掉*/
      /* background-size: contain;  进行等比例缩放,只要有一边到达了盒子边框则停止缩放 */
    
  </style>

3.多背景图片

就是将多个图片路径写在一块，中间用，隔开

background:url(image/aa.png) no-repeat,url(image/bb.png) no-repeat;

4.复合选择器

后代选择器

.box ul li

并集选择器

.box,
span,
p

交集选择器或标签指定式选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>并集选择器</title>
  <style>
   h2.d1    /*交集选择器，也称为标签指定式选择器*/
     color: orangered
   
  </style>
</head>
<body>
  <div class="box">绿水本无忧</div>
  <span class="d1">因风皱面</span>
  <h2 class="d1">青山原不老</h2>
  <p>为雪白头</p>
  <h2 class="d2">愿岁月静好</h2>
</body>
</html>

子元素选择器

.box > h3

5.属性选择器

6.伪元素选择器

::first-letter 设置第一行中的第一个汉字或英文字母

::first-line 设置第一行文字内容

::selection 将选中的某个文本内容设置对应的样式

两个常用的伪元素选择器

::before

::after

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>两个常用的伪元素选择器</title>
  <style>
    div 
      font-size:50px;
    
    div::before 
      content:"今天"
    
    div::after 
      content:"是没下雨的"
    
  </style>
</head>
<body>
  <div>天气</div>
</body>
</html>

7.元素的显示方式及转换

块级元素特点：

1.自己独占一行

2.可以设置宽度，内外边距

3.可以在里面嵌套的行内元素，行内块元素，甚至块元素

4.如果不设置宽度，默认是父容器宽度的100%

代表标签：div p h1--h6 ul li ol li dl dt dd header footer nav section aside main

行内元素特点：

1.设置宽高是不起作用的

2.一行当中可以设置多个行内标签，他们在一行中并列显示

3.设置的padding上右下左都起作用

4.设置的magin上下不起作用，左右是起作用的

5.默认宽度是元素内容的宽度

代表标签：span a b strong em del ins 伪元素::before ::after

行内块元素的特点：

1.设置宽高是起作用的

2.可以一行显示多个，是在一行并列显示的

3.内外边距都起作用

4.默认宽度是盒子内容的宽度

代表标签： input img button

元素之间的转换：

行内元素转块级元素或行内块： display: block(块); display: inline-block(行内块)

块级元素转行内或行内块元素： display:inline(行内)；display:inline-block(行内块); 这个几乎是不用的

行内块转行内或块级元素，也可以转换，但是没有意义，不用。

8.color的取值

color的取值有如下三种：

英文单词，比如 red green blue purple orange

十六进制： #0f123d #fa126b #123 #f0f

rgb值：（0，100，200） 0--255之间的一个数字来表示颜色

9.一行文本垂直居中

只需要当行高和高度的值设置为一样即可.

10.文本修饰

text-decoration: underline下线划 overline 上划线 line-throght 中划线

text-decoration: none 去掉下划线不仅仅是去掉下划线，还可以去掉中划线,相当于是去掉默认的那种文本样式

文本内容修饰：

text-align: left right center 来控制文字的水平对齐方式

text-indent:设置文字的首行缩进可以取px em 百分比还可以取负值

letter-spacing: 设置字间距字符与字符之间的距离，中英文都可以

word-spacing: 设置单词间距，如果是中文的话，一定是设置的词组，根据空格来区分

11.文字阴影

text-shadow: 水平位移垂直位移模糊大小阴影颜色。

总结：

background-color

background-image

background-repeat

background-position

background-attachment

background-size

多背景的实现

复合选择器

后代选择器 .box ul li

子代选择器 .box > h3

并集选择器 .box , p,span,.demo

交集选择器或标签指定式选择器： h2.demo 具有demo这个类的h2标签

属性选择器

E[type]

E[type="val"]

E[type^="val"]

E[type$="val"]

E[type*="ea"]

伪元素选择器

::first-letter

::first-line

::selection

::before ::after

元素的显示方式

块级元素

行内元素

行内块元素

display:block inline-block inline

用的最多的是将a或span转换成行内块或块

color的取值

英文单词

十六进制

rgb值

CSS外观样式

文本修饰：

设置文字水平的显示方式 text-align: left center right

text-indent: 设置文字缩进 px em 百分比还可以是负数

letter-spacing: 设置字间距

word-spacing: 设置单词间距

文字阴影：text-shadow: 水平垂直模糊阴影颜色。

以上是关于CSS基础的主要内容，如果未能解决你的问题，请参考以下文章