css基础-CSDN博客

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<style>
/* 设置img标签样式 */
img {
/* 设置宽 */
width: 400px;
/* 设置⾼ */
height: 200px;
 }
</style>
</head>

注意点：设置样式时必须按照固定的格式来设置. key: value;其中:不能省略,

分号⼤多数情况下也不能省略

3 外部样式表达

写在外部 css ⽂件中的，然后在 head 标签内使⽤ link 标签引⼊外部 css 样

式。

<link rel = "stylesheet" href = "./style/index.css" >

2.选择器

1.常见选择器

<style>

/* 通⽤选择器 * 选择所有的元素 */

* { }

/* 标签选择器，选择标签名为 div 的元素 */

div { }

/* id 选择器，选择 id 属性值为 two 的元素 */

#two { }

/* class 选择器，选择 class 属性值为 three 的元素 */

.three { }

/* 并集选择器，以逗号隔开，既选择 div 元素，⼜选择 span 元素 */

div , span { }

/* 后代选择器以空格隔开，选择 body 元素后代中的 div 元素 */

body div { }

.father .childer{ }

/*p标签里class为center的选择器*/

p.center{ }

</style>

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
         color: blue;
        font-size: 18px; 
        }
        h1 {
            color: aqua;
        }
        /* #是id选择器*/
        #two{
            color: brown;
        }
        /* class选择器 */
        .three{
            color: black;
        } 
        /* 并集选择器，中间用，分隔 */
        div,span{
            color: aquamarine;
        }
        /* 后代选择器 */
        body div{
            color:crgb(255, 238, 0)
        }
       
    </style>
</head>
<body>
    <div>one</div>
    <div id="two">two</div>
    <div class="three">three</div>
    <div class="four">three</div>
    <h1>nihao</h1>
    <span></span>
</body>
</html>

运行结果：

3.继承性

给⽗元素设置⼀些属性 , ⼦元素也可以使⽤。⼀般⽤于设置⽹⻚上的⼀些共性信息

1.注意点

1. 并不是所有的属性都可以继承 , 只有以 color/font-/text-/line- 开头的

属性才可以继承

2. 在 CSS 的继承中不仅仅是⼉⼦可以继承 , 只要是后代都可以继承

3. 继承性中的特殊性

3.1 a 标签的⽂字颜⾊和下划线是不能继承的

3.2 h 标签的⽂字⼤⼩是不能继承的

4.叠层性

层叠性只有在多个选择器选中" 同⼀个标签 ", 然后⼜设置了 " 相同的属

性 ", 才会发⽣层叠性

优先级：

行内样式（在 HTML 元素中）
外部和内部样式表（在 head 部分）
浏览器默认样式

行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

5.优先级

1.普通优先级

如何层叠就由优先级来确定

继承（间接选中）-------------------谁离⽬标标签⽐较近就听谁的

相同选择器（直接选中）---------- 谁写在后⾯就听谁的

不同选择器 ( 直接选中)-------------- 按照选择器的优先级来层叠

id> 类 > 标签 > 通配符 > 继承 > 浏览器默认

2.优先级之!important

提升某个直接选中标签的选择器中的某个属性的优先级

的 , 可以将被指定的属性的优先级提升为最⾼

注意点 :

1.!important 只能⽤于直接选中 , 不能⽤于间接选中

4.!important 必须写在属性值得分号前⾯

3.优先级权重

1.当多个选择器混合在⼀起使⽤时

2.继承的样式没有权值

3.只有选择器是直接选中标签的才需要计算权重 , 否则⼀定会听直接选中的选择器的

1----------- id 多的选择器优先级最⾼

2----------- 类名的个数 , 类名个数多的优先级最⾼

3----------- 标签名称的个数 , 标签名称个数多的优先级最⾼

4-----------优先级如果⼀样, 那么谁写在后⾯听谁的

权重的计算规则：

1----------内联样式，如 : style="..." ，权值为 1000 。

2----------ID 选择器，如： #content ，权值为 0100 。

3----------类，伪类、属性选择器，如 .content ，权值为 0010 。

4----------标签选择器、伪元素选择器，如 div p ，权值为 0001 。

5----------通配符、复合选择器（+ 、 > 、 ~ 等）、否定伪类（： not ）没有影响，权值为 0000

4.字体样式

color -------------字体指定颜⾊

颜⾊取值如下：

关键字：red,green,blue...

RGB：rgb(255,0,0),rgb(0,255,0),rgb(0,0,255)...

rgb( red, green, blue)

每个参数 (red、green 以及 blue) 定义了 0 到 255 之间的颜色强度/使用相等的值来定义灰色阴影。

RGBA:rgba(red, green, blue, alpha)

alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字：（文字不透明）

6位16进制：#ff0000,#00ff00,#0000ff...

rr（红色）、gg（绿色）和 bb（蓝色）是介于 00 和 ff 之间的十六进制值（与十进制 0-255 相同）。

font-size ---------⽂字指定⼤⼩

font-family ------⽂字指定特殊的字体，浏览器只会使⽤浏览器可以访问到的字体

font-weight -----字体设置粗细程度

text-align---------⽂字排列⽅式

line-height -------⾏⾼

5.背景样式

background-color--------------------背景颜色

opacity ----- -----------------------------不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明（文字透明）

background-repeat: repeat-x------水平重复

background-repeat: no-repeat----只显示一次背景

border-radius--------------------------设置圆角

background-attachment-------------属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）-----fixed（不动）scroll（动）

6.边框

border-width 属性指定四个边框的宽度。（两个值为上下、左右边框。四个值为上、右、下、左）

border-color 属性用于设置四个边框的颜色。

border 属性是以下各个边框属性的简写属性：

border-width
border-style（必需）
border-color

7.外边距

margin 属性用于在任何定义的边框之外，为元素周围创建空间。（上、右、下、左）

将 margin 属性设置为 auto，以使元素在其容器中水平居中。

inherit - 指定应从父元素继承外边距

例：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}
</style>
</head>
<body>

<h1>使用继承值</h1>
<p>左外边距继承自父元素：</p>

<div>
<p class="ex1">本段落继承了 div 元素的左外边距。</p>
</div>

</body>
</html>

运行结果：