CSS基础

Posted 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基础的主要内容,如果未能解决你的问题,请参考以下文章

HTML/CSS回顾之CSS基础

Css3之基础-2 Css 基础选择器

css实现基础图表

CSS基础

五、css基础(二)

css基础教程:对css代码精简