css基础-CSDN博客

本文链接：https://blog.csdn.net/xiaogeldx/article/details/85101690

文章目录

css基本使用
css选择器
- 选择器种类
- 伪类选择器
css字体/文本
css背景

css基本使用

- CSS 全称 Cascading Style Sheets，翻译过来就是层叠样式表
- 如果说HTML是网页的结构，那么CSS就是网页化妆师
- CSS 有三种写法
	- 直接写在标签内
	<p style="color:darkred;">hahahaha</p>
	- 写在 style 标签内
	<head>
       <meta charset="UTF-8">
       <title>xiaoge</title>
       <style type="text/css">
           p{		#p标签，如果span标签就改为span
               color:greenyellow;
           }
       </style>
	- 使用外部 .css 文件
		外部建一个css的文件夹，命名a.css，样式为：
		p{
		    color:mediumvioletred;
		}
		引用外部：
		<head>
		    <meta charset="UTF-8">
		    <title>xiaoge</title>
		    <link rel="stylesheet" href="css/a.css">		#此处放地址
		</head>
		如下图：

在这里插入图片描述

css选择器

CSS的选择器是CSS最基础，也是最重要的一个知识点，很重要
谁的权力大，就听谁的，同理，选择器权重也是一样，谁的权重值高，应用谁的，优先度
选择器用处：用于准确的选中元素，并赋予样式

选择器种类

标签选择器

  <p class="p1">我是一段话1</p>
  <p class="p1">我是一段话2</p>
  <p id="p1">我是一段话3</p>
  <span class="p1">我是一段话2222</span>
  <span class="p1">我是一段话333</span>

css代码：

  p,span{
      color:red;
  }
  p{
      color:yellowgreen;
  }
  /*渲染顺序从上至下*/

class选择器
通过标签的 class 属性，选择对应的元素，借助了一个类的概念，一处定义，可以多处使用

 <style type="text/css">
   /*类选择器*/
     .p1{
         color: darkred;
     }
 </style>
 <p class="p1">lalalala1</p>
 <p class="p1">lalalala2</p>
 <span class="p1">lalalala2</span>	#标签名可以不一致，同一个类一样效果

id选择器

通过标签的 id 属性，选择对应的元素，注：id选择器唯一，只对应一个标签
```
   /*id选择器*/
      #p2{
          color: yellow;
      }
      <p id="p2">lalalala3</p>
```

群组选择器

群组选择器是可以同时选择多个标签的选择器

p,span{
      font-size: 40px;
  }	# p，span的所有的标签都作用到

层次选择器

层次选择器分为子代、后代、相邻和兄弟四种选择器

后代选择器

  <div id="d1">
      <ul>	#d1的子代
          <li>a</li>
          <li>b</li>
          <li>c</li>
          <li>d</li>
      </ul>
      <div>	#div1的子/后代
          <p id="p1">	#div1的后代
              <span>span中的a</span>
              <span>span中的b</span>
          </p>
          <p>p中的</p>	#p1的兄弟
      </div>
      <span>a</span>
      <span>b</span>
      <span>n</span>
      <div id="div2">div</div>
      <p class="d1">div中的p1</p>		#div2的相邻
      <p class="d1">div中的p2</p>
      <p class="d1">div中的p3</p>
      <p class="d1">div中的p4</p>
      <p class="d1">div中的p5</p>
  </div>

css的代码：
```
  div li{
      color:red;
  }
```

在这里插入图片描述

子代选择器

  div>p{	/*div下面的同等级的所有的p标签都能渲染*/
      font-size:30px;
  }

在这里插入图片描述

兄弟选择器

  div~p{	/*div下面的所有的同等级的p标签*/
      color:blue;
  }

在这里插入图片描述

全选择器：
```
 *{
     color:indianred;
 }
```

在这里插入图片描述

相邻选择器

    .div2+p{	/*div下面的相邻的p标签*/
  	    color:blueviolet;
  	} 
  /*相邻的标签改变，正常上面的也应该改，但因为顺序是从上到下执行，所以只有下面的变了*/

在这里插入图片描述

p+p,span+span{
    font-size:25px;
}
/*用一个结合符只能选择两个相邻兄弟中的第二个元素*/

在这里插入图片描述

选择器的优先级：
- id选择器优先度高于类选择器优先于标签选择器
- id>class>标签

伪类选择器

link：未访问的
visited：访问过的
hover：划过的（鼠标划过的）

active：激活的（鼠标点中时就是激活）

  a:link{
          font-size: 20px;
      }
  <a href="#">点我回到顶部</a>
  <a href="https://www.baidu.com" target="_blank" title="点我去百度">点我回到顶部</a>
  /*	#表示空链接，并且回到顶部*/
  /*	title表示鼠标悬停时有提示*/
  /*<a> 标签的 target 属性规定在何处打开链接文档，target="_blank"表示跳转到新页面打开*/

在这里插入图片描述

css字体/文本

font-family：字体
font-size：字大小
font-style：字体样式	italic：斜体
font-weight：字体粗细	bold：加粗
font-variant：字体大小写
text-align：对齐方式
text-indent：首行缩进
text-decoration：文本线
letter-spacing：字距
word-spacing：词距
line-height：行高
font：复合样式
.p1{font:italic bold 20px 新宋体}
#有顺序，中间有空格，样式，粗细，大小，字体
	- 文本

在这里插入图片描述

css背景

背景样式：

  background-color：背景颜色
  background-image：背景图片
  background-repeat：背景铺盖
  	background-repeat:no-repeat;    不平铺
      background-repeat:repeat-x; x轴（横向）平铺
      background-repeat:repeat-y; y轴平铺
  background-size：背景大小
  background-position：背景定位
  
  ackground：复合样式

在这里插入图片描述