一 CSS简介

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素

语法结构：

选择器 {

属性名:属性值;

属性名:属性值;

}
注释语法

/**/
三种编写CSS的方式
1. head内的link标签引用外部CSS文件(推荐)
2. head内的style标签直接编写CSS代码
3. 直接在标签内部编写style属性

二 CSS选择器

2.1 基本选择器

标签选择器

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

id选择器

<style>
        #d1 {
            color: red;
        }
</style>

类选择器

<style>
        .c {
            color: red;
        }
</style>

通用选择器

<style>
        * {
            color: red;
        }
</style>

2.2 组合选择器

后代选择器

两个选择器之间空格隔开，前面的选择器取到的标签内部所有符合空格后面的选择器要求的标签

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div span {
            color: red;
        }
    </style>
</head>
<body>
  <p id="3">p</p>
  <div>div
      <p id="5">div里的p
          <span id="d1">div里的p里的span</span>
      </p>
      <span id="2">div里的span</span>
  </div>
    <p id="4">p</p>
</body>

儿子选择器

两个选择器之间用 > 隔开，前面的选择器获取到的标签内部第一层符合 > 后边的选择器要求的标签
```
<style>
        div>span {
            color: red;
        }
</style>
```
毗邻选择器

两个选择器之间用+号隔开，前面选择器获取的标签下面紧挨着的 + 号后的标签
```
<style>
        div+p {
            color: red;
        }
</style>
```

弟弟选择器

查找前面标签同级别下的符合后面的所有标签

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

2.3 属性选择器

所有的标签不仅有默认属性(id和class)，还可以自定义属性(x,y)。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*查找有name属性的并修改*/
        [name] {
            background-color: red;
        }
        /*查找有name属性并且属性值为p1的修改*/
        [name="p1"] {
            background-color: red;
        }
        /*查找span标签里由属性name的标签并且属性值为span1的标签修改*/
        span[name="span1"] {
            background-color: red;
        }
    </style>
</head>
<body>
  <div>div
      <p name="p1">div>p
          <span name="span1">div>p>span</span>
      </p>
      <span name="span2">div>span</span>
  </div>
    <p>p</p>
    <span name="123">span</span>
</body>

2.4 分组与嵌套

当多个选择器查找的标签需要调整为相同的样式，那么就可以合并

<style>
        [name=span1],span {
            background-color: red;
        }
</style>

合并的选择器彼此之间不干扰也没有类型的限制，还可以在选择器基础上添加额外的选择使得查找更精确。

2.5 伪类选择器

a标签默认的颜色有两种，紫色和蓝色，当浏览器从来没有访问过该地址就是蓝色，被访问过就是紫色。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
<a href="https://www.4399.com">点我进4399</a>
</body>

当鼠标悬停到a标签上时，会产生变化。

2.6 伪元素选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*给首字母设置特殊的样式*/
        p:first-letter {
            font-size: 50px;
            color: red;
        }
        /*后面插入内容*/
        p:after {
            content: "命运如同手中的掌纹，无论多曲折，终掌握在自己手中。";
            color: blueviolet;
        }
        /*前面插入内容*/
        p:before {
            content: "没有什么不可能，只看你去不去做。";
            color: chartreuse;
        }
    </style>
</head>
<body>
  <p> 穿透石头的水滴，它的力量来源于日积月累。</p>
</body>

2.7 选择器优先级

选择器相同，引入位置不同

就近原则
选择器不同

行内 > id选择器 > 类选择器 > 标签选择器 (精确度越高的优先级越高)

三字体样式

3.1 宽和高

width属性可以为元素调整宽度。

height属性可以为元素调整高度。

块级标签才可以调整宽度，行内标签的高度由自身内容决定。

3.2 文字字体

font-family

body {
            font-family:  "微软雅黑", sans-serif;
        }

font-size 字体大小

p {
            font-size: 50px;
        }

font-weight 设置字体粗细

值	描述
normal	正常值
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细
inherit	继承父类字体的粗细

p {
            font-size: 50px;
            font-weight: bolder;
        }

3.3 文本颜色

颜色属性被用来设置文字的颜色。

设置颜色的三种方式：

十六进制(#FF0000)
rgb值(rgb(255,0,0))
颜色的名称(red)

rgba第四个值为alpha，指定色彩的透明度，范围在0.0~1.0之间

3.4 文字属性

文字对齐

text-align 规定元素中文本对齐方式

值	描述
left	左对齐，默认
right	右对齐
center	居中
justify	两端对齐

文字装饰

text-decorration 属性用来给文字添加特殊效果

值	描述
none	默认，没有任何装饰
underline	定义文本下的一条线
overline	定义文本上的一条线
line-through	定义穿过文本下的一条线
inherit	继承父类的属性

常用：为a标签去除下划线

首行缩进

p {
            text-indent: 32px;
        }

四背景属性

<style>
        div {
            height: 400px;
            width: 400px;
            /*背景颜色*/
            /*background-color: gold;*/
            /*背景图片*/
            background-image: url("https://img1.baidu.com/it/u=3720572290,2769763744&fm=253&fmt=auto&app=138&f=JPEG?w=507&h=500");
            /*
            背景重复
            repeat：默认，背景图片平铺整个网页
            repeat-x：背景图片只在水平方向上平铺
            repeat-y：背景图片只在垂直方向上平铺
            no-repeat：背景图片不平铺
            */
            /*background-repeat: no-repeat;*/

            /*背景位置*/
            background-position: left top;
        }
    </style>


/*支持简写*/
background:#336699 url('1.png') no-repeat left top;

五边框属性

<style>
        /*i {*/
        /*    border-width: 2px;*/
        /*    border-style: solid;*/
        /*    border-color: red;*/
        /*}*/

        /*简写*/
        i {
            border: 2px solid red;
        }
</style>

边框样式

值	描述
none	无边框
dotted	点状虚线边框
dashed	矩形虚线边框
solid	实线边框

还可以单独为每个边框设置样式

i {
            border-top: 2px solid yellow;
            border-right: 2px solid red;
            border-bottom: 2px solid blue;
            border-left: 2px solid salmon;
        }

border-radius

div {
            width: 500px;
            height: 500px;
            background: red;
            border-radius: 250px;
        }

六 display属性

用于控制HTML元素的显示效果

display:“none”

HTML文档中元素存在，但是在浏览器中不显示，一般用于配合JavaScript使用。

<body>
    <p><input type="text" style="display: none"></p>
    <p>password:<input type="password"></p>
    <p><input type="date" style="display: none"></p>
</body>

display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

七盒子模型

margin：用于控制元素与元素之间的距离
border(边框)：围绕在内边距和内容外的边框
padding：用于控制内容与边框之间的距离
content：盒子的内容，显示文本和图像

在这里插入图片描述

掌握操作:

margin-top: 20px;
margin-right: 20px
margin-bottom: 20px
margin-left: 20px

body标签自带8px外边距

body {
	margin: 0;  /*作用与上下左右*/
	margin: 10px 10px;  /*上下 左右*/
	margin: 10px 10px 10px;  /*上 左右 下*/
	margin: 10px 10px 10px 10px;  /*上 右 下 左*/
}

margin还可以让内部标签居中展示

margin:100px auto;  /*仅限水平居中*/

八浮动

在css中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动会造成父标签塌陷，解决方法是伪元素清楚法。

.clearfix:after {
	content: '';
	display: block;
	clear: both;
}
/*提前写好上述代码 约到塌陷的标签直接给标签加上属性名即可*/

浏览器针对文本是优先显示的。

九溢出属性

值	描述
visible	默认值，内容不会被修剪，会呈现在元素框外
hidden	内容会被修剪，并且其余的内容不可见。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto	被修剪后以滚动条展示
inherit	规定应该从父元素继承overfull属性

圆形头像

div {
	height: 50px;
	width: 50px;
	border: 5px solid red;
	border-redius: 50%;
	overfull: hidden;
}

img {
	max-width: 100%;
}

十定位

static(静态)：所有的标签都不能通过定位来修改位置。
relative(相对定位)：相对于标签原来的位置做定位。
absolute(绝对定位)：基于已经定位过的父标签做定位。
fixed(固定定位)：相对于浏览器的窗口做定位。

十一 z-index

浏览器其实是一个三维的坐标系，z轴指向用户。

三十六、前端基础 CSS

CSS相关

一 CSS简介

二 CSS选择器

2.1 基本选择器

2.2 组合选择器

2.3 属性选择器

2.4 分组与嵌套

2.5 伪类选择器

2.6 伪元素选择器

2.7 选择器优先级

三字体样式

3.1 宽和高

3.2 文字字体

3.3 文本颜色

3.4 文字属性

四背景属性

五边框属性

六 display属性

七盒子模型

八浮动

九溢出属性

十定位

十一 z-index

相关推荐

三十六、前端基础 CSS

CSS相关

一 CSS简介

二 CSS选择器

2.1 基本选择器

2.2 组合选择器

2.3 属性选择器

2.4 分组与嵌套

2.5 伪类选择器

2.6 伪元素选择器

2.7 选择器优先级

三 字体样式

3.1 宽和高

3.2 文字字体

3.3 文本颜色

3.4 文字属性

四 背景属性

五 边框属性

六 display属性

七 盒子模型

八 浮动

九 溢出属性

十 定位

十一 z-index

相关推荐

三字体样式

四背景属性

五边框属性

七盒子模型

八浮动

九溢出属性

十定位