【无标题】第三周预习博客-CSS基础、选择器、盒子模型

最新推荐文章于 2024-07-13 11:50:40 发布

哒咩摆烂

最新推荐文章于 2024-07-13 11:50:40 发布

阅读量263

点赞数

文章标签： css

本文链接：https://blog.csdn.net/m0_62021245/article/details/124201176

版权

CSS基础、选择器、盒子模型

前言
一、CSS基础
二、选择器、CSS三大特性
三、元素显示模式、背景
- 1.CSS的元素显示模式
- 2.CSS的背景
四、盒子模型
五一个案例
总结

前言

本文是在学习了网课之后，自己做的总结，
除了标题上的三类内容，还有其他添加的内容，可能会有错误，望指出。

一、CSS基础

1.CSS简介

1.1HTML的局限性

HTML的目的是描述网页的内容，要美化网页的外观，用HTML会很麻烦，费时费力。

1.2 CSS-网页美容师

CSS 指的是层叠样式表* CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素 CSS
节省了大量工作，它可以同时控制多张网页的布局

1.3 CSS语法规范

构成：    选择器 {            // 选择器是用于指定CSS样式的HTML标签
               属性;属性值    // 属性和属性值以键值对的形式出现，之间用;隔开，可以有多条属性
          }                  // {} 内是对该对象设置具体的样式
                             // 整体写在 <style></style> 标签里面

1.4 CSS代码风格

1.样式格式书写分为紧凑型和展开型，一般写成展开型
2.样式一般用小写
3.空格规范：冒号后面留一个空格、选择器和{}中间保留一个空格

2.CSS字体属性

2.1 字体

字体用 font-family 属性定义
如下，给<body>标签设置字体为微软雅黑

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

2.2 文字大小

文字大小用 font-size 属性定义
注意大小后要加 px(像素）如20px，即文字大小为二十像素

body {
          font-size: 20px;}

2.3 文字粗细

文字粗细用 font-weight 属性定义，blod为加粗（也可以写成数值700），normal为不加粗（也可以写成数值400）

 body {
           font-weight: blod;}

2.4 文字样式

文字样式由 font-style 属性定义，normal 表示正常，italic 表示斜体。

body {
          font-style: italic;}

2.5 简写

可以用一个 font: 属性将字体、大小、粗细、样式一起定义，更加简洁方便。
格式为： font: font-style font-weight font-size/line-height font-family;
注意：简写格式可以省略 font-style 、line-height 和 font-weight 属性，但必须写 font-size 和 font-family 属性，否则 font: 属性将不起作用。

body {
          font: 20px 'Microcoft Yahei';}

3.文本属性

定义文本外观
3.1 颜色

颜色由color属性定义
其中颜色有三种形式：十六进制（#六位十六进制数）、颜色英文、RGB代码（rgb(0,0,0)形式，括号里三个值分别是red green blue)

color: 颜色值；

3.2 文本居中

由text-align定义
属性值有三种：left，center，right，默认文本向左对齐（left)

text-align: center;

3.3 装饰文本

由 text-decoration 定义
属性值有四种：none表示无，underline表示下划线，line-through表示删除线，overline表示上划线。默认属性为none。

text-decoration: ubderline;

3.4 文本缩进

由text-indent定义
属性值为像素值（如20px）或 2em ,em表示当前元素一个文字的大小

text-indent: 2em; // 首行缩进两个字

3.5 行间距

由line-height定义
行间距=上间距+下间距+文本高

line-height: 20px;

4.CSS引入方式

4.1 内部样式表

控制一个页面，也叫嵌入式
就是把CSS写到HTML里的<style>标签里，理论上<style>可以放到HTML文档任何地方，一般放在<head>标签里。

4.2 行内样式表

控制一个标签
在标签内部写style属性，用于修改简单样式

如： 修改<p>标签里的属性
   <p style="color: pink;"> 修改文字颜色</p>

4.3 外部样式表

控制多个页面
引入外部样式表：
1.新建CSS文件
2.直接写样式（不用写在<style>标签里）
3.用link标签引入文件
<link rel="stylesheet" href="CSS文件路径">

5.Chrome调试工具

5.1 打开

按F12键或点击鼠标右键选择检查

5.2 使用

1.Ctrl+滚轮可以放大代码
2.左边是HTML右边是CSS
3.点击元素，如果右侧没有样式引入，那么就是类名或者央视引入错误，如果有样式但是前面有黄色感叹号提示，则可能是样式属性错误。

二、选择器、CSS三大特性

1.CSS基础选择器

1.1 作用

正确选择要修改样式的部分

1.2 标签选择器

标签名作为选择器 ,如要修改p标签里的内容样式
p { color: red font-size: 20px;}

1.3 类选择器

差异化选择不同的标签
可以给一个标签设置多个类名
口诀：样式点定义，结构类调用，一个或多个，开发最常用

.类名 { 属性1： 属性值1；   
        属性2： 属性值2；}   //定义类选择器
<p class="类名"> 类选择器的应用</p>  //调用

1.4 id选择器

口诀：样式#定义，结构id调用，只能用一次，别人切勿用

#id名 {
          属性: 属性值;}
<p id="id名">id选择器</p>

1.5 通配符选择器

选中页面中的所有标签

* {    属性: 属性值;}

2.CSS的复合选择器

2.1 什么是复合选择器

复合选择器就是基础选择器的组合，有两个或多个基础选择器组成

2.2 后代选择器（包含选择器）

可选择父元素里面的子元素

结构：  元素1 元素2 { 样式声明}  // 元素2是元素1的后代

2.3 子选择器（子元素选择器）

选择作为某元素的最近一级子元素

结构：  元素1>元素2 { 样式声明}

2.4 并集选择器

选多组标签，同时定义他们的样式
任何形式的选择器都可以作为并集的部分

元素1（选择器1），
元素2（选择器2），
元素3（选择器3） { 样式声明}

2.5 伪类选择器

向某些选择器添加特殊的效果，用：表示

2.5.1 链接伪类选择器

a:link 选择未被访问的链接
a:visited 选择已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接
写的时候要按照顺序写 L-V-H-A ，给链接指定样式要单独指定

a {
     color: red;
     text-decoration: none;}
a:hover {
     color: blue;}           //当鼠标指定链接时，链接颜色由红色变为蓝色

2.5.2 focus伪类选择器
选取获得焦点的表单元素并改变其样式

input:focus {  background-color: yellow;}    // 当光标在该表单处时，表单背景色为黄色

3.CSS的三大特性

3.1 层叠性

若给相同的选择器设置了相同的样式，样式会冲突，则后来的样式会覆盖之前冲突的样式
原则：
1.就近原则：哪个样式离结构近就执行那个
2. 样式不冲突就不会覆盖

3.2 继承性

子标签会继承父标签的某些样式，这里的某些样式是指和文字相关的一些样式，如 font- ,text-,line-…
但高和宽的样式不会继承

3.3 优先级

若同一个元素指定多个选择器，就会有优先级产生
若选择器相同，根据就近原则
若选择器不同，根据权重执行

选择器	权重
继承 / *	0，0，0，0
元素	0，0，0，1
类 / 伪类	0，0，1，0
id	0，1，0，0
行内样式选择器	1，0，0，0
！important	无穷大

注意：
1.权重由四个数字组成，但不会进位
2.继承的权重是0，如果该元素没有被直接选中，不管父级元素的权重有多高，子元素得到的权重都是0. 看标签会被执行，就看这个标签有没有被直接选中

权重叠加 复合选择器有权重叠加问题，如

ul li { color: red;}   
// 该复合选择器的权重是0,0,0,1+0,0,0,1=0,0,0,2  注意不会进位

三、元素显示模式、背景

1.CSS的元素显示模式

1.1 什么CSS的元素显示模式

元素/标签以什么方式在页面中显示，分为块元素、行内元素

1.2 块元素

如 <h1>-<h6> <p> <div>

特点
1.自己独占一行
2.默认宽度是容器/父级的%100
3.高度、宽度、内外边距都可设置
4.是个容器，里面可以放行内或块级元素
注意：文字类标签内不能用块级元素

1.3 行内元素

如 <a> <strong> <b> <em> <i> <span>

特点：
1.相邻元素在一行上，一行可以显示多个
2.高、宽直接设置是无效的
3.默认宽度是本身内容的宽度
4.只能容纳文本或其他行内元素
注：链接里不可再放链接，a里可以放块级元素（给a转换为块级元素）

1.4 行内块元素

如 <img/> <input/> <td>

特点：（同时具有块级元素和行内元素的特点）
1.一行可可有多个行内块元素
2.默认宽度是其内容的宽度
3.可以设置宽度和高度

1.5 元素显示模式转换

当一个模式的元素需要另一种模式的特性时，就是需要进行模式转换

转换	属性
转换成块级元素	display: block;
转换成行内元素	display: inline;
转换成行内块元素	display: inline-block;

2.CSS的背景

2.1 背景颜色

background-color: tranparent（透明的）/颜色;

2.2 背景图片

可以是logo / 小的装饰性图片 / 超大的图片，很便于控制图片位置

background-image: none(没有图片）/ url （图片的路径）;

2.3 背景平铺

background-repeat: repeat/no-repeat/repeat-x/repeat-y;
       //默认情况背景图片是平埔repeat的，后面分别是不平铺，延X轴平铺，
       延Y轴平铺

2.4 背景图片位置

background-position: x y;

x y 可以是方位名词或精确单位
方位名词有 top /center/ left /right /bottom
1.当参数是方位名词时和顺序没关系，当只写了一个值，则为x值，默认y值为center
2.单参数是精确单位时，有顺序，若只有一个值时，为x坐标，默认y坐标为居中
3.当参数是混合单位时，第一个时x，第二个时y

2.5 背景图像固定（背景附着）

background-attchment: scroll / fixed;
         // scroll（默认）是背景随对象内容滚动，fixed 是背景固定

2.6 背景图片复合写法

background: 颜色 图片 平铺 滚动 位置；// 无顺序

2.7 背景色半透明

只是让背景色透明，但里面的内容不影响

background: rgba(0,0,0,0.3);
  // rgba 里的r是red,g green,b blue,a alpha指透明度 值在0-1之间

四、盒子模型

1.1 组成

元素	表示
border	边框
content	内容
padding	内边距
margin	外边距

1.2 边框


border-weidth: 粗细px ；	边框粗细
border-style: 样式；	样式有 none(无边框）solid(实线边框）dashed(虚线边框）dotted（点线边框）等
border-color：颜色；	默认为黑色

边框简写： border: 5px solid pink; //无顺序
边框分开写发（四条边分开）：
border-top/bottom/right/left：分别写四条边的样式；

1.3 表格细线边框

合并相邻边框border-collapse: collapse;
边框会影响盒子的实际大小

1.4 内边距

paddng-top/bottom/left/right: 像素值；
内边距的复合写法：
padding: 5px; 指上下左右内边距都是5px
padding: 5px 10px; 指上下5px 左右10px
padding: 5px 10px 20px; 指上5px 左右10px 下20px
padding: 5px 10px 20px 30px; 指上右下左按顺时针方向分别为对应值

内边距也会影响盒子的实际大小

1.5 外边距

margint-left/right/top/nottom
其简写方式与padding完全一致

五一个案例

简洁小米侧边栏当鼠标移动到一个链接块内，该块会由灰色变为橘色

<!DOCTYPE html>
<html lang="en">
<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>
        a {
            display: block;
            width: 200px;
            height: 40px;
            font-size: 14px;
            text-decoration: none;
            background-color: #666; 
            padding-left: 30px;
            color: #fff;
            line-height: 40px;
            
        }
        a:hover {
            background-color: #ff6700;
        }
    
    </style>
</head>
<body>
    <a href="#">手机 电话卡</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">电视 盒子</a>
    <a href="#">耳机 音响</a>
</body>
</html>