首页 > 其他分享 >走进CSS—I

走进CSS—I

时间：2023-09-08 20:22:16浏览次数：41  
标签：color 走进 标签 background text 选择器 CSS

点击链接走进前端学习：https://blog.csdn.net/qq_53810245/article/details/116831968

@

目录

在这里插入图片描述
学习心得：在网页中进行样式的调试。调试完成后将代码粘贴到自己的代码中

一、走进CSS

1、CSS的简单介绍

网页 = HTML结构 + CSS表现 + JavaScript交互，做一些动作
CSS中尽量避免使用逗号，尽可能使用空格

1、什么是CSS

1.1、什么是CSS

Cascading Style Sheet层叠级联样式表
CSS：表现（美化网页）
字体、颜色、边距、高度、宽度、北京图片、网页定位、网页浮动……
在这里插入图片描述

1.2、发展史

CSS1.0，实现字体加粗之类的相关变化
CSS2.0，实现DIV（块）+ CSS + Html与CSS结构分离的思想，网页变得简单，SEO
CSS2.1，浮动、定位
CSS3.0，圆角，阴影，动画……
在这里插入图片描述

2、CSS快速入门

在这里插入图片描述

<style></style>

选择器{
	声明1; 
	声明2;
	声明3;
}

在这里插入图片描述
在<head></head>中，用<link rel="stylesheet" href="css/style.css">引入css文件
在这里插入图片描述

3、CSS的优势：

  • 内容和表现分离
  • 网页结构表现统一，可以实现复用
  • 样式十分的丰富
  • 建议使用独立于html的css文件
  • 利用SEO ，容易被搜索引擎收录！

4、CSS的3种导入方式

行内样式（内联样式）

在标签元素中，编写一个style属性，编写样式即可
<h1 style="color:red">我是标题</h1>

内部样式（内嵌样式表）

<head>
<style type="text/CSS">
    选择器（选择的标签） { 
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
</style>
</head>

外部样式（外链式）

<head>
  <link rel="stylesheet" type="text/css" href="css文件路径">
</head>

rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略
href ：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
注意：

  • link 是个单标签。
  • link标签需要放在head头部标签中，并且指定link标签的三个属性

优先级：就近原则
行内样式 > 谁离行内样式近谁的优先级就高
拓展：外部样式的两种写法

  • 链接式:
    是html标签，只能放入html源码中使用
<head>
  <link rel="stylesheet" type="text/css" href="css文件路径">
</head>
  • 导入式 :
    作为css样式，作用是引入css样式功能，是css2.1特有的！
<head>
  <style>
  		@import url("css/style.css");
  </style>
</head>

2、CSS选择器（重点+难点）

作用：选择页面上的某一个或者某一类元素

2.1、基本选择器

1、标签选择器

格式：标签{}
特点：选择一类标签，标选择器会选择到页面上的所有的这个标签的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>龙芯浏览器</title>
    <style>
        h1 {
            color: chocolate;
            background: aqua;
            border-radius: 24px;
        }
        p{
            font: 80px;
        }
    </style>
</head>
<body>
<h1>这是第一个标题</h1>
<p>选择器学习</p>

</body>
</html>
2、类选择器 clsss

格式：.class的名称{}
优点：可以多个标签归类，是同一个 class ，可以复用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>龙芯浏览器</title>
    <style>
        .bh1{
            color: #00ffff;
        }
        .bh2{
            color: chocolate;
        }

    </style>
</head>
<body>
<h1 class="bh1">这是第一个标题</h1>    text-align: center;

<h1 class="bh2">这是第二个标题</h1>
<p class="bh1">这是第三个标题</p>

</body>
</html>
3、id 选择器

格式：#id的名称{}
优点：id是全局唯一的，精准定位 

<head>
    <meta charset="UTF-8">
    <title>龙芯浏览器</title>
    <style>
        #bh1{
            color: #00ffff;
        }
        .bh2{
            color: chocolate;
        }

    </style>
</head>
<body>
<h1 class="bh2" id="bh1">这是第一个标题</h1>
<h1 class="bh2">这是第二个标题</h1>
<p class="bh1">这是第三个标题</p>

</body>

不遵循就近原则，优先级：id 选择器 > class 选择器 > 标签选择器

2.2、层次选择器

<body>
    <p class="active">p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
</body>

1、后代选择器：在某个元素的后面
祖爷爷 爷爷 爸爸 我

body p{
	/*在body下的所有p标签，均做背景颜色改动*/
	background:red;
}

2、子选择器
只有一代：爸爸 你

body>p{
	/*只有在body下的第一代p标签，才做背景颜色改动。只有p1,p2,p3做改动*/
	background:red;

3、相邻兄弟选择器
同辈，同级，但只对下

/*.active下的一个相邻p标签*/
.active + p{
	background:red;
}

4、通用选择器
对下不对上，当前选中元素的向下的所有兄弟元素

/*.active下的所有p标签*/
.active～p{
	background:red;
}

2.3、结构伪类选择器

伪类：所有带:的，条件选择器
当鼠标移入时触发该事件a:hover{ background:red; }

<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</body>

问题：在不使用class、id选择器时，针对于以上body结构，当我们只想选中ul的第一个子元素，应该怎么办呢？

<style>
	/*选中ul的第一个子元素*/
	ul li:first-child{
		background:red;
	}
	/*选中ul的最后一个子元素*/
	ul li:last-child{
		background:red;
	}

p:nth-child(1){}：选择当前P元素的父级元素，选择父级元素的第一个元素，并且是当前元素才生效！

	/*选中p1：定位到父级元素，选择当前的第一个元素*/
	p:nth-child(1){
		background:red;
	}

p:nth-of-type(1){}：选择父级元素下达第二个为p的标签

	/*选中父元素下的p元素的第二个类型*/
    p:nth-of-type(1){
        background: rebeccapurple;
    }

在这里插入图片描述

2.4、属性选择器【常用】

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>龙芯浏览器</title>
    <style>
        .demo a{
            float: left;/*向左浮动*/
            display: block;/*块距元素*/
            height: 50px;
            width: 50px;
            border-radius: 10px;/*圆角边框*/
            background: cyan ;
            text-align: center;/*对齐方式*/
            color: rebeccapurple;/*字体颜色*/
            text-decoration: none;/*去掉下划线*/
            margin-right:5px ;/*分开加外边距向右偏移*/
            font: bold 20px/50px Arial;/*字体粗体+字体大小/行高*/
        }

    </style>
</head>
<body>
<p class="demo">
    <a href="https://baidu.com" class="links item first" id="first">1</a>
    <a href="" class="links item active"target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item">10</a>
</p>

</body>
</html>
  • =：是绝对等于
  • *=：是模糊等于，包含这个元素
  • ^=：以这个开头
  • $=：以这个结尾
  • a[属性名或属性名=属性值（正则）]{}
    a[id=first]{background:green;}：id=first的元素
    a[class*="links"]{}：class中由links的元素
    a[href^=http]{}：选中href中以http开头的元素
    a[href$=pdf]{}：选中href中以pdf结尾的元素
    补充：
    在这里插入图片描述
    在这里插入图片描述
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      p {
        color: blue;
      }
      p[title='one'] {
        color: red;
      }
      p[title~='two'] {
        color: green;
      }
      p[title|='three'] {
        color: pink;
      }
    </style>
  </head>

  <body>
    <p title="five">我爱学习</p>
    <p title="one">我爱运动</p>
    <p title="one two">我爱吃饭</p>
    <p title="three-four">我爱睡觉</p>
  </body>
</html>

3、美化网页元素（文字、阴影、超链接、列表、渐变）

3.1、为什么要美化网页

1、有效的传递页面的信息
2、美化网页，页面漂亮才会吸引用户
3、凸显页面的主题
4、提高用户的体验
span标签：重点要突出的字，使用该标签套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>龙芯浏览器</title>
    <style>
        #fo{
            font-size: 50px;
        }
    </style>
</head>
<body>
    欢迎来到我的 <span id="fo">空间</span>
</body>
</html>

3.2、字体样式

font-family：字体样式
font-size：字体大小
font-weight：字体粗细，:bold粗体，:lighter细体
color：字体颜色

p{
	font:oblique bolder 16px "楷体";
}

3.3 文本样式

1、颜色

  1. RGB（六位）：

  • 000000【黑色】

  • FF0000【红色】

  • 00FF00【绿色】

  • 0000FF【蓝色】

  1. RGBA：红+绿+蓝+透明度[0-1之间]
  • color：rgba(0,255,255,0.5)
    2、文本对齐的方式
  • text-align:center：文本排版[left，right]
    3、首行缩进
  • text-indent:2em：段落首航缩进2字符
    4、行高
  • line-height:30px：行高，如果和块的高度一致就可以上下居中——单行文字上下居中
    5、上、中、下划线
  • text-decoration:overline;：上划线
  • text-decoration:line-through;：中划线
  • text-decoration:underline;：下划线
    6、去掉超链接下划线
    a标签默认有下划线，因此text-decoration:none;可以超链接去掉下划线
    7、文本&&图片水平对齐
    img,span{vertical-align: middle;}：文本&&图片水平对齐
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>龙芯浏览器</title>
    <style>
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <img src="image/a.jpg" alt="">
    <span>空间冷冷冷冷类</span>
</body>
</html>

3.4 阴影

在这里插入图片描述
水平：左——右：负——正
垂直：下——上：正——负
#price{ text-shadow: 5px 5px 5px darkgray; } ：水平偏移x、垂直偏移y、模糊半径、及其阴影颜色

3.5 CSS伪类

格式：

selector:pseudo-class {
  property: value;
}

锚伪类：链接能够以不同的方式显示：
a:link { color: #FF0000;}：未访问的链接
a:visited { color: #00FF00;}：已访问的链接
a:hover { color: #FF00FF;}：鼠标悬停链接【重点】
a:active {color: #0000FF;}：已选择的链接

3.6 列表

在这里插入图片描述

list-style :
none ：去掉圆点
circle ：空心圆
decimal ：变成数字有序列表
square ：正方形

ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

对a标签进行修饰

a{
    text-decoration: none;
    font-size: 14px;
    color: #000000;

}
a:hover{
    color: aqua;
    text-decoration: underline;
}

3.7 背景

背景颜色
背景图片
在这里插入图片描述
.div1{background-repeat: repeat-x;}：水平平铺
div2{ background-repeat: repeat-y;}：垂直平铺
.div3{background-repeat: no-repeat;}：不平铺
border: 1px solid red;：边框：粗细1px 样式solid实线（dashed虚线） 颜色red
background-position: 236px 2px;：背景位置

<style>
		div{
				width: 1000px;
				height: 700px;
				/*边框：粗细1px 样式solid实线 颜色red*/
				border: 1px solid red;
				/*默认是全部平铺*/
				background-image: url("images/logo.png");
		}
		/*水平平铺*/
		.div1{background-repeat: repeat-x;}
		/*垂直平铺*/
		.div2{ background-repeat: repeat-y;}
		/*不平铺*/
		.div3{background-repeat: no-repeat;}
</style>

在这里插入图片描述

3.8 背景渐变

取得渐变色颜色网址点击跳转在这里插入图片描述

    <style>
        body{
            /*background-color: #21D4FD;*/
            background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
        }
    </style>

4、盒子模型

4.1 什么是盒子模型

在这里插入图片描述
margin：外边距
padding：内边距
border：边框

4.2 边框

因为浏览器的原因，body总有默认的选项：外边距margin，内边距padding，下划线text-decoration，因此在写代码前将其初始化为0

<style>
        /*body总有默认的选项：外边距margin，内边距padding，下划线text-decoration，因此在写代码前将其初始化为0*/
        h1,ul,li,a,body{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
</style>

border: 1px solid red;
1、边框的粗细 1px
2、边框的样式 solid实线，dashed虚线
3、边框的颜色

4.3 内外边距

在这里插入图片描述
在这里插入图片描述

盒子的计算方式：看你这个元素有多大？
网页大小 = margin + border + padding + 内容宽度

  • 内边距padding
  • padding:0 0 0 0;代表顺时针设置边距
  • padding:0 auto;代表上下边距0,左右边距自动
  • 外边距margin可以实现居中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        body {
            /*body总有一个默认的外边距margin: 0;*/
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        #box {
            width: 300px;
            border: 1px solid red;
            margin: auto auto;
        }
        h2{
            font-size: 16px;
            background: #21D4FD;
            line-height: 28px;
            color: chartreuse;
            margin: auto auto;
        }
        form{
            background:#21D4FD;
        }
        input{
            border: 1px solid black;
        }
        div:nth-of-type(1){
            padding: 10px 2px;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="box-h2"><h2 id="box-hh2">京东会员</h2></div>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text" placeholder="邮箱/用户名/已验证手机">
        </div>
        <div>
            <span>密&emsp;码：</span>
            <input type="password" placeholder="请输入密码">
        </div>
        <div>
            <span>邮&emsp;箱：</span>
            <input type="text" placeholder="请输入密码">
        </div>
    </form>
</div>
</body>
</html>

4.4 圆角边框

用div标签画一个圆
<div style="width:100px;height: 100px;border: 10px solid red; border-radius: 100px"></div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>(｡♥‿♥｡)圆角边框</title>
    <style>

        #div1{
            width:100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 100px ;
        }
        text{
            font-size: 30px;
            color: red;
        }
        #nav{
            width: 100px;
            display: flex;
            align-items: center;
           justify-content: space-around;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="div1">
    <div id="nav">
        <div>
            <text>♥</text>
            <text>‿</text>
            <text>♥</text>
        </div>
    </div>
    <h2></h2>
</div>

</body>
</html>

4.5 阴影

box-shadow: 10px 10px 100px green;：设置阴影，x方向，y方向，阴影宽度，阴影颜色
#price{ text-shadow: 5px 5px 5px darkgray; } ：水平偏移x、垂直偏移y、模糊半径、及其阴影颜色

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            box-shadow: 10px 10px 100px green;
        }
    </style>
</head>
<body>
<div></div>

</body>
</html>

5、浮动

6、定位

7、网页动画（特效效果）

点击跳转继续学习：走进CSS—II

标签：color,走进,标签,background,text,选择器,CSS
From： https://www.cnblogs.com/zhuhukang/p/17688476.html

相关文章

  • 走进JavaScript基础语法
    点击链接走进前端学习：https://blog.csdn.net/qq_53810245/article/details/116831968@目录JavaScript1、概述2、基本语法入门2.1定义变量2.2浏览器控制台使用在这里插入图片描述2.3数据类型1.变量命名：以$或_开头标识2.number：3.字符串：'abc'，''abc''4.布尔值：true，false5.逻......
  • css加载图标转圈代码
    转圈代码<iclass="el-icon-loading"></i>.el-icon-loading{animation:rotating2slinearinfinite}.el-icon--right{margin-left:5px}.el-icon--left{margin-right:5px}@keyframesrotating{0%{transfor......
  • 使用CSS给页面关键词加条彩虹线
    使用CSS给页面关键词加条彩虹线给页面页面关键词下方加上一个彩虹颜色的装饰线条，更能吸引人注意力，这里来动手实现看看效果效果css.txt-title{width:600px; text-align:center; padding:10px0; margin-bottom:15px; }.txt-titlep,{ font-size:16px; padding:1......
  • HTML5与CSS3实现动态网页（下）
    js完整的javascript是有ECMAScript（语法）BrowserObjects(DOMBOM)特性组成的。//单行注释/**/多行注释ECMASxript中的一切(变量函数名和操作符)都区分大小写1：什么是标识符变量函数属性的名字或者函的参数2：表示符命名规则有字符数字下划线或$符号......
  • web前端技能方法总结（css、js、jquery、html）
    CSS设置背景(background)背景颜色background-color背景图片background-image背景重复background-repeat:repeat-x/repeat-y背景位置background-position:bottom/left/top/right/center背景关联background-attachment:fixed/scroll综合写法：.tagName{background:#ffffffurl(“a......
  • HTML5与CSS3实现动态网页（下）
    js完整的javascript是有ECMAScript（语法）BrowserObjects(DOMBOM)特性组成的。//单行注释/**/多行注释ECMASxript中的一切(变量函数名和操作符)都区分大小写1：什么是标识符变量函数属性的名字或者函的参数2：表示符命名规则有字符数字下划线或$符号组成不能以......
  • Css 修改图标颜色_Css 修改图片颜色_Css控制图片颜色
    一、Css3mask修改图标颜色（推荐）CSS3mask默认是基于透明度实现遮罩效果的。也就是实色区域显示，透明区域隐藏。因此，我们只需要把目标图标颜色#f4615c作为背景色，然后原始图标（无论什么颜色都可以）作为遮罩图片，效果就出来了。<!DOCTYPEhtml><htmllang="en"><head><meta......
  • 【前端】CSS-flexbox弹性盒模型布局
    目录一、前言二、flexbox简介三、属性1、容器属性2、容器成员属性四、容器属性的作用1、flex-direction①、定义②、语句1）、属性值③、代码示例1）、flex-direction:row2）、flex-direction:row-reverse3）、flex-direction:column4）、flex-direction:column-reverse2、flex-wrap①、......
  • 【前端】CSS3新特性
    目录一、前言二、伪元素选择器1、选择器2、注意事项3、代码示例三、伪元素清除浮动1、第一种伪元素清除浮动2、第二种伪元素清除浮动四、CSS3盒子模型1、box-sizing：content-box2、box-sizing：border-box五、CSS3图片模糊处理1、图片变模糊①、CSS3滤镜filter②、语法③、实例实现2......
  • QGraphicsScene和QGraphicsView坐标系统
     GraphicsView中有三个坐标系统，即场景坐标、视图坐标、图形项坐标。场景坐标场景坐标等价于QPainter的逻辑坐标，一般以场景中心为原点；视图坐标与设备坐标相同，是物理坐标，默认为左上角为原点；图形项的坐标是局部逻辑坐标，一般以图形项的中心为原点。一个图形项的位置是其中心点在......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99