初识CSS

CSS基本语法

内部样式：

CSS嵌入到 html 内部，CSS 要写到 style 标签中，style标签可以放到页面任意位置，但一般放到 head 标签内~~

这种样式针对所有同类标签生效~~

<style>
  p {
    /* 设置字体颜色 */
    color: red;
    /* 设置字体大小 */
    font-size: 30px;
  }
</style>
<p>hello</p>

内联样式：

使用html标签里的style属性，只针对当前元素生效~~

内联样式会覆盖掉内部样式和外部样式，也就是内联样式的优先级比内部样式和外部样式高~~

<div style="color:green">想要生活过的去, 头上总得带点绿</div>

外部样式：

外部样式是实际开发中最常用的，复用性毕竟高~~首先它需要先创建一个.css文件，再使用link标签引入css~~

<link rel="stylesheet" href="CSS文件路径">

CSS 使用 /* */ 作为注释

CSS选择器

基础选择器

标签选择器：能快速为同一类型的标签都选择出来，但是不能差异化选择~~

<style>
p {
  color: red;
}
div {
  color: green;
}
</style>

类选择器：差异化表示不同的标签，可以让多个标签的都使用同一个标签~~

<style>
  .blue {
    color: blue;
 }
</style>
<div class="blue">咬人猫</div>
<div>咬人猫</div>

id选择器：只能表示一个标签，同一个 id 在一个 HTML 中只能出现一次~~

<style>
  #ha {
    color: red;
 }
</style>
<div id="ha">蛤蛤蛤</div>

通配符选择器：表示页面中的所有标签，通常用于干掉浏览器的默认样式~~

* {
  color: red;
}

复合选择器

后代选择器：选择某个父元素中的某个子元素(孙子元素及其后代也可以)

<ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
</ul>
<ol>
  <li>ddd</li>
  <li>eee</li>
  <li>fff</li>
</ol>
​
ol li {
  color: red;
}
​
-----------------------------------------------------------------------------------------
​
<ol class="one">
  <li>ddd</li>
  <li>eee</li>
  <li><a href="#">fff</a></li>
  <li><a href="#">fff</a></li>
  <li><a href="#">fff</a></li>
</ol>
​
.one li a {
  color: green;
}

子选择器：和后代选择器类似，但是只能选择子标签。

<div class="two">
  <a href="#">链接1</a>
  <p><a href="#">链接2</a></p>
</div>
​
.two>a {
  color: red;
}

并集选择器：用于选择多组标签

<div>苹果</div>
<h3>香蕉</h3>
<ul>
  <li>鸭梨</li>
  <li>橙子</li>
</ul>
​
div, h3 {
  color: red;
}

伪类选择器：hover光标放上去出现对应的效果，active点击出现对应效果

<a href="#">小猫</a>
​
a:hover {
  color: red;
}
​
a:active {
  color: blue;
}

CSS常用属性

设置字体宽高：

div {
    width: 200px;
    height: 100px;
}

设置字体：

div {
  font-family: '微软雅黑';
  font-family: 'Microsoft YaHei';
}

设置文本大小：

p {
  font-size: 20px;
}

设置文本粗细：取值范围是 100 到 900，数字越大字体越粗~~

p {
  font-weight: bold;
  font-weight: 700;
}

设置文本颜色：

p {
    color: red;
    color: rgb(0,0,0,"透明度0-1");
}

设置文本对齐：

center: 居中对齐

left: 左对齐

right: 右对齐

p {
    text-align: left;
    text-align: right;
    text-align: center;
}

设置文本装饰：

none: 啥都没有，用处是可以给 a 标签去掉下划线等

underline: 下划线

overline: 上划线

line-through: 删除线

p {
    text-decoration: none;
    text-decoration: underline;
    text-decoration: overline;
    text-decoration: line-through;
}

设置文本缩进：控制段落的首行缩进~~

p {
    text-indent: 10px;
    text-indent: 2em;//em单位名称为相对长度单位~~
}

设置行高(文本间距离)：

p {
    line-height: 40px;
}

设置背景颜色：

p {
    background-color: red;
}

设置背景图片：

p {
    background-image: url(...);
}

设置背景平铺：

repeat: 平铺(默认)

no-repeat: 不平铺

repeat-x: 水平平铺

repeat-y: 垂直平铺

p {
    background-repeat: repeat;
    background-repeat: no-repeat;
    background-repeat: repeat-x;
    background-repeat: repeat-y;
}

设置背景位置：

方位名词：top(顶部)、bottom(底部)、left(左)、right(右)

p {
    background-position: center center;//前面的center代表横坐标居中，后面的代表纵坐标居中~~
}

设置背景尺寸：

p {
    background-size: 100px 200px;
    background-size: cover;//cover是把背景图像扩展至足够大，以使背景图像完全覆盖背景区域~~
}

圆角矩形：使按钮变的圆润~~

button {
    border-radius: 30px;
    border-radius: 2em;//em单位名称为相对长度单位~~
}

元素显示模式

行内元素：不独占一行, 一行可以显示多个

a
strong
b
em
i
del
s
ins
u
span
...

块级元素：独占一行

h1 - h6
p
div
ul
ol
li
...

display属性：display属性可以修改元素的显示模式~~

display: block 改成块级元素

display: inline 改成行内元素

display: none 让元素隐藏~~

p {
    display: block;
    display: inline;
    display: none;
}

盒子模型

每一个 HTML 元素就相当于是一个矩形的 "盒子"，这个盒子由这几个部分构成：

1、内容 content

2、边框 border ：

修改边框粗细,样式,元素(顺序随意)

p {
    border: 1px solid red;
}

边框会撑大盒子，不想撑大盒子可以通过box-sizing属性做到~~

p {
    box-sizing: border-box;
}

3、内边距 padding：

设置上下左右的内边距

p {
    padding: 5px; 表示四个方向都是 5px
}

设置上下和左右的内边距

p {
    padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
}

4、外边距 margin：

设置上下左右外边距

p {
    margin: 10px; // 四个方向都设置
}

设置上下和左右外边距

p {
    margin: 10px 20px; // 上下为 10, 左右 20
}