CSS基础介绍

在前端开发中我们了解到,CSS为为页面内容更改样式的,全称为层叠式样式表

在编程是格式为写在title标签下

<style type="text/css"> 描述内容 </style>

一、CSS属性

这边首先介绍一些CSS基础属性方便举例说明更多所要用到的之后会概述

括号里内容为在sublime中快捷键  简写+Tab键

1.颜色  color:red;   (c)

2.像素 font-size:40px;  (fos)  //注意像素单位

3.加粗:font-weight: bold;   (fwb)

正常:font-weight: normal;    (fwn)

4.字体倾斜:font-style: italic;  

正常同上

5.背景颜色:background-color: blue;  (bgc)

6.text-decoration: underline;        (tdn)

这些属性都是慢慢记忆积累这里介绍一些最基础的。

二、选择器

在我们对于一些内容更改样式时首先要选择到更改的地方这里介绍了一些选择器

1.标签选择器

举例:<h1>{

巴拉巴拉

}

然后所有<h1>标签里的东西都变,该方法描述共性问题。

2.id选择器

这边不做介绍一般使用下面这个(避免与JS的一些冲突)

3.类选择器

我们可以为标签添加类名 class= "类名"(每一个标签可以有多类名只能在一个class中用空格隔开表示)

在CSS中我们以  点加类名选择

例:我们要做这样的一个页面

源码及为(省略了一些不必要的部分):

<style type="text/css">
2			.lv{
3				color:green;
4			}
5			.da{
6				font-size: 60px;
7			}
8			.xian{
9				text-decoration: underline;
10			}
11		</style>

        <p class="lv da">段落1</p>
2		<p class="lv xian">段落2</p>
3		<p class="da xian">段落3</p>

更多的是方便了一些内容的共性调整。

4.后代选择器

后代这个概念我们首先要明了简易理解为一个标签里所有我包裹的标签都为我的后代

  1. <div class="div1">
  2.               <ul>
  3.                      <li>
  4.                             <p>段落</p>
  5.                             <p>段落</p>
  6.                             <p>段落</p>
  7.                      </li>
  8.               </ul>

       </div>

  1. .div1 p{
  2.                      color:red;

              }

这样的一个描述就代表div后代中的p变成红色,空格可多次存在,空格所接内容也可以包括类名。

5.交集选择器

在选择其中点表示通俗理解为谁的谁

div.div1

看到这个就表示有一个

<div class="div1"></div>

选择器不是固定死的,通常是组合起来用,实例化时更好理解。

6.并集选择器

表示谁和谁都是怎样 选择器上逗号连接

这些是一些最底层的选择器,那么在CSS3中还有更多更高级的选择器供使用,这边就不介绍的。

小编这篇所讲只是一部分后面的会慢慢更新博客介绍的(还在往后学习中)。

猜你喜欢

转载自blog.csdn.net/qq_40833779/article/details/81147620