简介CSS

news2024/11/24 6:32:01

目录

一、CSS概述

二 、CSS的语法规则

三、CSS的引入方式

1、内部样式表

2、行内样式表 

四、代码风格 

1、紧凑风格

2、展开风格 

五、选择器 

1、基础选择器

标签选择器 

类选择器 

id选择器

通配符选择器 

2、复合选择器 

后代选择器 

 子选择器

并集选择器 

 伪选择器

六、常用的元素属性 

1、字体属性

2、文本属性

文本颜色

文本对齐方式 

文本装饰 

文本缩进

行高 

3、背景属性 

背景颜色

背景图片 

设置背景图片效果 

背景图片位置

设置背景图片大小 

4、圆角矩形 

七、元素的显示模式 

1、块级元素

2、行内元素

八、盒子模型 

border边框 

padding内边距

margin外边距 

九、弹性布局 

十、综合实现典型的页面布局 

一、CSS概述

CSS：层叠样式表。

CSS能够对HTML设计出的页面更加美化，能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离.

二 、CSS的语法规则

一个CSS的语句包含有两部分：选择器+应用的属性。

例如：

<style>
    p{
        /*字体颜色*/
        color: blueviolet;
        /*字体样式*/
        font-family: 宋体;
    }
</style>

在{ }中使用键值对的结构来表示CSS中的各种属性。

CSS代码通常是放到HTML文件的style标签中。

在CSS代码中注释样式：/* 注释 */ 

三、CSS的引入方式

1、内部样式表

通过style标签来写CSS样式，直接放到HTML代码的内部。

例如：

<div>
    <p>120uuj
        <style>
            p {
                color: pink;
            }
        </style>
</div>

2、行内样式表 

通过style来指定HTML中某个标签的样式。

例如：

<p style="font-family: 微软雅黑" style="color: chocolate">909</p>

3、外部样式

需要首先创建一个CSS文件，然后使用link标签来引入CSS。

<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" href="style.css">
</head>

在head标签中引入link标签，在CSS文件中可以指定样式：

p{
    color:red
}

四、代码风格 

1、紧凑风格

例如：p { color: red; font-size: 30px;}

这样写看起来比较紧凑，但是节省带宽，能提高代码的效率。

2、展开风格 

例如：

p {
    color : red ;
    font-size : 30px ;
}
这样写整体看起来美观，但是带宽增加了传输效率低，

注意：

  • CSS代码不区分大小写，但是在开发过程中统一使用小写编写代码。
  • 在CSS的代码中冒号后面要有空格 ，并且选择器和{之间也要有一个空格。

五、选择器 

1、基础选择器

由单一选择器组成。

标签选择器 

只针对某一标签来设计样式。

例如：

<style>
    p {
       color: aqua;
        font-family: 微软雅黑;
        font-size: 10px;
    }
</style>

类选择器 

类选择器也是要嵌套在style标签中，类选择以.开头来进行定义：

<style>
    .one {
        color: red
    }
</style>

应用类选择器时，只要被让标签的class属性指向指定的类：

例如在div标签中应用one选择器

<div class="one">
    <span>计算机</span>
    <span>电脑</span>
    <span>键盘</span>
</div>

一个类选择器可以同时被多个标签调用。

id选择器

id选择器与类选择器的使用十分类似，但是 id选择器是以#开头的。

例如：

<style>
    #one {
        color: red
    }
</style>

在某个p标签中利用id属性来指定one选择器：

<p id="one">
    i love you
</p>

一个id选择器最多只能被一个标签调用。

通配符选择器 

使用*来进行定义，选择了所有标签。

例如：

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

当标签没有指定选择器时就默认使用通配符选择器中的样式。

2、复合选择器 

多个选择器复合使用。

后代选择器 

选择器1 选择器2  ……{

        样式

}

注意：

  • 选择器1和选择器2之间必须有空格。
  • 选择器1是选择器2的父级，选择器2可以是选择器1的子级或者孙子级改变选择器2并不影响选择器1.
  • 选择的步骤是先找到选择器1，然后再寻找选择器2。
  • 选择器的类型可以是类选择器、id选择器和标签选择器。

例如将div标签中指定类选择器的设置为如下样式：

<style>
    div .two{
        font-family: 微软雅黑;
        color: antiquewhite;
    }
</style>

 子选择器

选择器1>选择器2  ……{

        样式

}

注意：

  • 选择器2只能是选择器1的子级，不能是孙子级。
  • 其余要求与后代选择器类似。

例如：

<style>
    div>span{
        color: aquamarine;
        font-size: 20px;
    }
</style>

并集选择器 

选择器1，选择器2  ……{

        样式

}

并集选择器可以同时选择多组标签。

例如：

<style>
    div>span,div a{
        color: aquamarine;
        font-size: 20px;
    }
</style>

 伪选择器

链接伪类选择器
a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接 ( 鼠标按下了但是未弹起 )
例如： 
<style>
    a:hover{
        color: #990000;
    }
    a:visited{
        font-family: 微软雅黑;
        font-size:15px;
    }

</style>

伪类选择器

选取获取焦点的 input 表单元素。
例如： 
<input type="text">
<style>
    input:focus{
        color: #678123;
    }
</style>

六、常用的元素属性 

1、字体属性

字体家族：font-family

字体大小：font-size

字体粗细：font-weight

字体样式：font-style

2、文本属性

文本颜色

color属性值的写法：

  • 预定义的颜色值：直接是颜色的英文单词，例如：red、pink等。
  • 十六进制形式：#908980。
  • RGB方式：rgb(190,90,99)。

文本对齐方式 

控制文字水平方向的对齐：

使用text-align：center/left/right,可以实现居中对齐、左对齐和右对齐。

文本装饰 

使用text-decoration
常用取值 :
  • underline 下划线.
  • none 啥都没有. 可以给 a 标签去掉下划线.
  • overline 上划线.
  • line-through 删除线

文本缩进

主要是用于段落的首行缩进，不会影响到其他行。

使用text-indent。

单位是px或者em，1个em就是缩进1个字符，1em=16px

行高 

行高指的是上下文本之间的基线距离。

在HTML中通常会涉及的基准线有：顶线、中线、基线和底线。

 

行高=字体大小+行间距。

使用line-height来进行设置。

3、背景属性 

背景颜色

设置背景颜色background-color，与字体color类似。

background-color属性值的写法：

  • 英文单词。
  • RGB。
  • 十六进制数字。
  • rgba。
  • transparent来设置背景透明，表示应用了父元素背景。

背景图片 

设置背景图片使用background-image，当设置完背景图片之后，默认是一个平铺的效果。

格式为：

background-image：url("图片路径")

设置背景图片效果 

使用background-repeat：平铺方式

平铺方式有：

  • repeat：平铺。
  • no-repeat：不平铺。
  • repeat-x:水平平铺。
  • repeat-y：垂直平铺。

背景颜色与背景图片是可以同时存在的，并且背景图片会在背景颜色的上方。

背景图片位置

使用background-position：x，y；来修改图片的位置。

可以使用以下三种风格：

  • 方位名词：top、left、right和bottom。
  • 精确单位：坐标或者是百分比，以左上角为原点。
  • 混合单位：同时包含方位名词和精确单位。

计算机中使用的坐标系是左手坐标系。

设置背景图片大小 

使用background-size：x px,y px;来设置背景图片的大小.

也可以使用contain或者cover来让背景图片自适应元素大小。

4、圆角矩形 

通过border-radius来设置边框带圆角的效果。

使用：border-radius：px；

七、元素的显示模式 

1、块级元素

常见的块级元素有：h1~h6、p、div、ol、ul、li……

特点：

  • 独占一行。
  • 高度、宽度、内外边距和行高都是可控制的。
  • 宽度默认和父级元素一样宽。
  • 是一个容器，里面可以放置行内元素和块级元素。

2、行内元素

常见的行内元素有：a、span、img、strong、ins……

特点：

  • 不独占一行, 一行可以显示多个。
  • 设置高度, 宽度, 行高无效。
  • 左右外边距有效(上下无效). 内边距有效。
  • 默认宽度就是本身的内容。
  • 行内元素只能容纳文本和其他行内元素, 不能放块级元素。

八、盒子模型 

在盒子模型中每一个HTML的元素就相当于是一个矩形的盒子。

一个盒子模型由如下几部分组成：

  • 边框：border。
  • 内容：content。
  • 内边距：padding。
  • 外边距：margin。

注意在设置内外边距时会增大元素整体的大小，所以可以使用

box-sizing: border-box;

来挤压内容而不是撑大元素。

border边框 

基础属性有：
  • 粗细: border-width
  • 样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
  • 颜色: border-color

padding内边距

指的是内容和边框之间的距离。

默认内容是顶着边框来放置的， 用 padding 来控制这个距离
也可以给四个方向都加上边距：
  • padding-top
  • padding-bottom
  • padding-left
  • padding-right

margin外边距 

指的是控制盒子和盒子之间的距离。
可以给四个方向都加上边距
  • margin-top
  • margin-bottom
  • margin-left
  • margin-right

九、弹性布局 

弹性布局主要是安排页面上的元素的排列方式。

在上述介绍的属性中都只是针对元素本身来进行设置的，但是在元素与元素之间有时候还需要设置样式。

默认的网页布局是从上到下的，块级元素独占一行，而实际的网页中不仅仅需要从上到下，还需要从左到右。

那么通过flex布局就可以调整子元素的排列方式。

水平排列方式：just-content：设置主轴上的子元素排列方式.

垂直排列方式：align-items 

 

十、综合实现典型的页面布局 

要求：

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    </style>
    <style>
        .nav{
            background-color: aquamarine;
            height: 100px;
            text-align:center;
            line-height: 40px;
            font-size:30px
        }
    </style>
    <style>
        .content{
            height:500px;
            justify-content: center;
            display: flex;
            align-items: center;
        }

    </style>
    <style>
        .content .left,.content .right{
            width: 20%;
            height:500px;
            background-color: pink;
            text-align: center;
        }

    </style>
    <style>
        .content .middle{
            width: 60%;
            height:500px;
            background-color: red;
            text-align: center;
        }

    </style>
    <style>
        .footer{
            height:200px;
            background-color: lightsteelblue;
            font-size: 30px;
            display: flex;
            text-align: center;
            line-height: 60px;
            justify-content: center;
        }
    </style>
    <div class="nav">
        <span>导航区</span>
    </div>
    <div class="content">
        <span class="left">左侧边栏</span>
        <span class="middle">内容区</span>
        <span class="right">右侧边栏</span>
    </div>
    <div>
        <span class="footer">页脚区</span>
    </div>
</body>
</html>

效果展示：

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/193393.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

网络设备和常见网络拓扑

网络设备和常见网络拓扑

目录 集线器 网桥 交换机 路由器 常见网络拓扑 总线型 环形 星型 树型 网状 集线器 集线器的英文称为“Hub”。“Hub”是“中心”的意思&#xff0c;它的主要功能是对接收到的信号进行再生整形放大&#xff0c;以扩大网络的传输距离&#xff0c;同时把所有节点集中在…
阅读更多...
threejs 几何图形 相交、差集、并集 插件

threejs 几何图形 相交、差集、并集 插件

目前搜集到的有以下几个 THREE-CSGMeshhttps://github.com/manthrax/THREE-CSGMeshcsg.jshttps://github.com/jscad/csg.jsOctreeCSGhttps://github.com/giladdarshan/OctreeCSG/threeBSP 这个现在已经不更新了【对新版本不支持了geometry新版中移除了】threebsp 【这个是前辈…
阅读更多...
Win10系统如何调整分区大小？

Win10系统如何调整分区大小？

在使用Win10系统的过程中&#xff0c;如果电脑分区大小不合适或某个分区已满的问题可以通过调整分区大小来解决。可以缩小其他有闲置空余空间的分区&#xff0c;在得到未分配的空间后&#xff0c;然后将其分配到已满的分区&#xff0c;或者直接合并2个分区。接下来一起看看调整…
阅读更多...
Elasticsearch Java入门

Elasticsearch Java入门

Elasticsearch安装 官网下载 下载的时候注意版本&#xff0c;spring boot如果用的是2.2版本就下载6.8的版本就行 下载完成之后解压&#xff0c;运行bin->elasticsearch.bat就可以启动服务了 做出win服务 elasticsearch-service.bat install浏览器输入localhost:9200 Ki…
阅读更多...
BandZip cmd调用参数

BandZip cmd调用参数

命令行参数 Bandizip&#xff08;Bandizip.exe&#xff09;及其控制台应用程序&#xff08;bz.exe&#xff09;支持以下命令行参数&#xff1a; 注&#xff1a;推荐使用bz.exe&#xff0c;这个是专门给控制台的&#xff0c;更加稳定一些 # Bandizip.exe <archive> # Ban…
阅读更多...
Linux中hosthost.confhost.allowhost.deny作用

Linux中hosthost.confhost.allowhost.deny作用

可实现应急响应断网&#xff1a;阻止本机对恶意IP的访问链接 /etc/host.conf 为解析库声明的配置信息 /etc/hostname 配置主机名&#xff08;永久生效&#xff09; /etc/hosts 配置ip地址映射 /etc/hosts.allow 配置ip地址白名单 /etc/hosts.deny 配置ip地址黑名单 解…
阅读更多...
Centos7安装jdk1.8tomcat

Centos7安装jdk1.8tomcat

文章目录注意一 jdk1.8下载与安装1.1 JDK下载地址1.2 查看Centos7自带jdk版本1.2.1 第一种方式1.2.2 第二种方式1.2.3 第三种方式1.2.4 下载自带JDK1.2.5 安装JDK1.2.6 补充&#xff1a;查看jdk的安装目录1.2.7 配置环境变量二 tomcat下载与安装三 服务器运行项目模拟3.1 第一步…
阅读更多...
EvilSelenium：一款功能强大的Chromium浏览器渗透测试工具

EvilSelenium：一款功能强大的Chromium浏览器渗透测试工具

关于EvilSelenium EvilSelenium是一款基于 Selenium的渗透测试工具&#xff0c;该工具基于武器化的Selenium实现其功能&#xff0c;可以帮助广大研究人员针对基于Chromium的浏览器进行安全分析和渗透测试。 功能介绍 1、通过autofill获取存储的凭证信息&#xff1b; 2、获取C…
阅读更多...
2023年黑马Java入门到精通教程--Java基础语法

2023年黑马Java入门到精通教程--Java基础语法

java基础语法 变量详解 二进制 只有0、1&#xff0c;按照逢2进1的方式表示数据&#xff1a; 十进制转二进制的算法 除二取余法。 计算机中的数据的最小单位 其他数据形式是如何存储的 字符在计算机中是如何存储的呢&#xff1f; ASCII编码表&#xff1a;即美国信息交换标准…
阅读更多...
代码随想录算法训练营第五十八天_第九章_动态规划 | 392.判断子序列、115.不同的子序列

代码随想录算法训练营第五十八天_第九章_动态规划 | 392.判断子序列、115.不同的子序列

LeetCode 392.判断子序列 给定字符串 s 和 t &#xff0c;判断 s 是否为 t 的子序列。 视频讲解https://www.bilibili.com/video/BV1tv4y1B7ym/?spm_id_from333.788&vd_sourcef98f2942b3c4cafea8907a325fc56a48文章讲解https://programmercarl.com/0392.%E5%88%A4%E6%96%A…
阅读更多...
【Java线程】线程退出和终止

【Java线程】线程退出和终止

1. 线程终止 —— 通知方式 通过在 T1 线程中修改 T2 线程中的控制变量&#xff0c;来实现 T1 线程通知 T2 线程终止。 示例如下&#xff1a; /*** description: 线程的终止和退出测试* author: Liuwanqing* date: 2022-10-14 17:00*/ public class ThreadExit_ {public sta…
阅读更多...
边缘检测与角点检测(模式识别与图像处理课程作业)

边缘检测与角点检测(模式识别与图像处理课程作业)

边缘检测与角点检测&#xff08;模式识别与图像处理课程作业&#xff09;一、边缘检测1.1、读取图像1.2、图像转换成灰度图像1.3、Sobel算子1.4、Canny算子1.5、显示正常中文的标签1.6、边缘检测结果二、角点检测2.1、读取图像2.2、图像转换成灰度图像2.3、Harris算子2.4、设置…
阅读更多...
HTTPTunnel测试

HTTPTunnel测试

介绍 HTTPTunnel是一个隧道软件。通过http的GET和POST请求隐藏隧道内的流量。适用于有网络封锁的环境&#xff0c;比如防火墙仅允许80端口数据包通过&#xff0c;内部终端访问外部其他应用时&#xff0c;或者渗透测试时访问内部目标服务器的其他业务端口时&#xff0c;都可以通…
阅读更多...
MySQL多表操作案例练习

MySQL多表操作案例练习

目录 准备 需求 代码 准备 -- 创建test1数据库 create database test1; -- 选择使用test1数据库 use test1; -- 创建部门表 create table dept(deptno int primary key,-- 部门编号dname varchar(14) ,-- 部门名称loc varchar(13) -- 部门地址 ) ;insert into dept values(…
阅读更多...
【Rust】19. 模式与模式匹配

【Rust】19. 模式与模式匹配

19.1 所有可能会用到模式的位置 19.1.1 match 分支 19.1.2 if let 条件表达式 可以组合并匹配 if let、else if 和 else if let 表达式&#xff0c;优势在于可以将多个值与模式比较&#xff08;match 表达式一次只能将一个值与模式比较&#xff09;&#xff0c;且各个分支并不…
阅读更多...
[NOI Online 2022 入门组] 王国比赛

[NOI Online 2022 入门组] 王国比赛

题目背景&#xff1a; 经过管理员的考虑&#xff0c;我们打算将民间数据单独存放在最后一个 Subtask 中。这些测试点分数均为 0 分&#xff0c;但是没有通过其中的任何测试点将会视为此题不通过。 民间数据提供者&#xff1a;一扶苏一。 题目描述&#xff1a; 智慧之王 Kri …
阅读更多...
C++八数码程序图形化界面[2023-02-02]

C++八数码程序图形化界面[2023-02-02]

C八数码程序图形化界面[2023-02-02] 问题简介 八数码&#xff1a;是指在3x3的矩阵中&#xff0c;其中有8个格子放置成1-8&#xff0c;剩下一个格子是空格。能够移动和空格相邻的格子到空格&#xff0c;直到这个矩阵满足每一行依次从左到右读取是有序&#xff0c;得到最后得到1…
阅读更多...
爱普生LQ-610K针式打印机不通电维修

爱普生LQ-610K针式打印机不通电维修

基本参数： 爱普生LQ-610K是一台针式打印机，不支持网络打印，A4幅面，不支持自动双面打印。 品牌：爱普生Epson 型号：LQ-610K 颜色：灰色 类型：针式打印机 幅面：A4幅面 针数：24针 打印速度：中文（6.7cpi）150汉字/秒 100汉字/秒 （7.5cpi）168汉字/秒 112汉字/秒5…
阅读更多...
【整理分享】一些常见Vue面试题（附答案解析）

【整理分享】一些常见Vue面试题（附答案解析）

本次给大家分享一些关于Vue的常见面试题&#xff0c;带你梳理基础知识&#xff0c;增强Vue知识储备&#xff0c;值得收藏&#xff0c;快来看看吧&#xff01; Vue 常见面试题总结 MVVM模型&#xff1f; MVVM&#xff0c;是Model-View-ViewModel的简写&#xff0c;其本质是MVC…
阅读更多...
【Git笔记】GitHub创建远程库，推送到远程库，拉取到本地库与克隆到本地库

【Git笔记】GitHub创建远程库，推送到远程库，拉取到本地库与克隆到本地库

目录 创建 GitHub 远程库 创建远程库别名 推送本地库到远程库 拉取远程库到本地库 克隆远程库到本地库 创建 GitHub 远程库 点击 New repository Repository name 名字与工作区名称最好一致 Public 就是开源&#xff0c;Private 就是私有&#xff0c;不公开 其它的保持…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023