您的位置:首页 > 科技 > 能源 > web基础之CSS

web基础之CSS

2024/12/23 5:19:42 来源:https://blog.csdn.net/Yunzhong_jiuxiao/article/details/140849266  浏览:    关键词:web基础之CSS

web基础之CSS

文章目录

  • web基础之CSS
    • 一、CSS简介
    • 二、基本用法
      • 2、CSS应用方式
        • 2.1 行内样式
        • 2.2内部样式
        • 2.3外部样式
    • 三、选择器
      • 1、标签选择器
      • 2、类选择器
      • 3、ID选择器
      • 4、选择器的优先级
    • 四、常见的CSS属性
      • 1、字体属性
      • 2、文本属性
      • 3、背景属性
      • 4、表格属性
      • 5、盒子模型的属性
      • 6、定位
    • 总结

一、CSS简介

CSS(Cascading Style Sheel)层叠样式表。是一组设置样式规则,并用于空值页面的外观布局的样式。

作用:用于页面的外观美化,以及页面组件的布局和定位。

二、基本用法

CSS语法:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css语法</title><style>选择器{        		#表示要修饰的对象属性名:属性值;	  #修饰对象的具体属性(样式):样式的取值;}</style></head><body></body>
</html>

示例:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css语法</title><style>p{font-size: 20px;color: red;}</style></head><body><p>这是一个段落标签</p></body>
</html>

在这里插入图片描述

2、CSS应用方式

引用方式一共有三种:行内样式、内部样式、外部样式。

2.1 行内样式

被称为嵌入式,通过使用HTML 标签的style属性进行定义,样式只对设置了style属性的标签起作用。

<body><p>这是一个段落标签</p><p style="color: red; font-style: 宋体;">样式的尝试,行内样式</p>
</body>

在这里插入图片描述

2.2内部样式

被称为内嵌样式,在页面头部通过style标签定义,对当前页面中所有符合样式的选择器标签都起作用。

	<head><meta charset="utf-8"><title>css语法</title><style>p{color: pink;font-size: 50px;}</style></head><body><p>这是一个段落标签</p><p>样式的尝试,内部样式</p></body>

在这里插入图片描述

2.3外部样式

就是在页面文件外单独的创建一个.css 的文件。然后再页面文件中使用 link标签 进行引入。
引用:

	<head><meta charset="utf-8"><title>css语法</title><link rel="stylesheet" type="text/css" href="css/01.css" /></head>

css文件:

h1{color: green;
}
p{color: blueviolet;
}

在这里插入图片描述

三、选择器

1、标签选择器

也被称为元素选择器,使用HTML标签作为选择器的名称。
在这里插入图片描述

在这里插入图片描述

2、类选择器

使用自定义的名称,以 . (点)作为前缀,然后再通过HTML 标签的Class属性调用类选择器。

注意:

  • 调用时不能添加 . 号。
  • 同时调用多个类选择器时,以 空格 分隔。
  • 类选择器名称不能以数字开头。
    在这里插入图片描述

3、ID选择器

使用自定义名称,以#作为前缀,然后通过HTML标签的id属性进行名称匹配,一对一的关系。
在这里插入图片描述
在这里插入图片描述

4、选择器的优先级

行内样式>ID选择器>类选择器>标签选择器
因为样式的加载顺序是,根据书写顺序进行加载的,在同优先级的前提下,后加载的会覆盖先加载的同名样式,就是就近原则,离得越近越优先。

四、常见的CSS属性

1、字体属性

设置字体的相关样式。

属性含义说明
font-size大小、尺寸可以使用多种单位
font-weight粗细
font-family字体
font-style样式
font简写
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css语法</title><!--<link rel="stylesheet" type="text/css" href="css/01.css" />--><style>h1{color: red;font-size: 50px;}.a{color: blueviolet;font-weight: bold;}#bb{color: green;font-family: 宋体;}.aa{color: aqua;font-style: italic;}</style></head><body><p id="bb">这是一个段落标签</p><p class="a">样式的尝试,内部样式</p><h1>这是一个大标题</h1><p class="aa">样式</p></body>
</html>

在这里插入图片描述

2、文本属性

属性含义说明
color颜色
line-height行高行之间的高度
text-align水平对齐方式取值:left、center、right
vertical-align竖直对齐方式取值:top、middle、bottom可用于图片和文字的对齐方式
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css语法</title><!--<link rel="stylesheet" type="text/css" href="css/01.css" />--><style>h1{color: red;font-size: 50px;line-height: 50px;text-align: center;}.a{color: blueviolet;font-weight: bold;line-height: 80px;vertical-align:top;}#bb{color: green;font-family: 宋体;text-align: left;}.aa{color: aqua;font-size: 80px;font-style: italic;text-align: right;}</style></head><body><p id="bb">这是一个段落标签</p><p class="a">样式的尝试,内部样式</p><h1>这是一个大标题</h1><p class="aa">样式</p></body>
</html>

在这里插入图片描述

3、背景属性

属性含义说明
background-color背景颜色
background-image背景图片使用url()方式进行指定图片路径
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css语法</title><!--<link rel="stylesheet" type="text/css" href="css/01.css" />--><style>body{background-color: bisque;<!--background-image: url("img/03.png");-->}h1{color: red;font-size: 50px;line-height: 50px;text-align: center;}.a{color: blueviolet;font-weight: bold;line-height: 80px;vertical-align:top;}#bb{color: green;font-family: 宋体;text-align: left;}.aa{color: aqua;font-size: 80px;font-style: italic;text-align: right;}</style></head><body><p id="bb">这是一个段落标签</p><p class="a">样式的尝试,内部样式</p><h1>这是一个大标题</h1><p class="aa">样式</p></body>
</html>

在这里插入图片描述

4、表格属性

border-collapse:表格中相邻的边框是否合并为单一边框。
取值:separated(默认) collapse

		<style>table{width: 200px;height: 100px;border: 1px solid red;border-collapse: collapse;}td{border: 1px solid red;}</style>

在这里插入图片描述

5、盒子模型的属性

盒子模型就是网页页面的布局。

  • width:宽度
  • height:高度
  • border:边框
  • padding:内边框
  • margin:外边框
    盒子的边框(border)
    盒子的边框分为四个方向:
    1、顶部:top:border -top 三个样式:分别是:1、color 、width、和style
    2、右边:right border -right 三个样式:分别是:1、color 、width、和style
    3、左边:left border-left 三个样式:分别是:1、color 、width、和style
    4、下边:bottom border -bottom 三个样式:分别是:1、color 、width、和style
  • 边框样式的取值:
    1、solid实线、
    2、dashed:虚线
    3、dotted:点线
    4、double:双线
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>盒子模型属性</title><!--<link rel="stylesheet" type="text/css" href="css/01.css" />--><style>p{width: 300px;background-color: aquamarine;}.a1{/* border-top-color:red;border-top-width: 2px;border-top-style: solid;border-right-color: blue;border-right-width: 3px;border-right-style: dotted;主要设置了顶部边框和右边框的属性*/border: 1px solid red;padding: 20px;margin: 10px;}.a2{padding: 30px;}.a3{margin: auto;text-align: center;height: 100px;line-height: 100px;}</style></head><body><p class="a1">这是一个元素</p><p class="a2">这是二个元素</p><p class="a3">这是三个元素</p></body>
</html>

在这里插入图片描述

6、定位

通过position 属性实现对元素的定位,在设置定位方式后,还需要设置定位属性。
定位常见方式取值如下:

取值含义说明
static默认值按照常规文档流进行显示
relative相对定位相对于标签原来的位置进行定位
absolute绝对定位相对于第一个非static定位的父标签的定位
fixed固定定位相对于浏览器窗口进行定位
定位属性就是:顶部(top)、左边(left)、右边(right)、顶部(bottom)
  • 1、相对定位

先设置元素的position属性为relative,然后再设置定位属性(方向性)。

  • 2、绝对定位

先设置父标签为非static定位,然后设置元素的position属性为absolute,最后再设置定位属性(也就是方向)。

  • 3、固定定位
    先将元素的position属性设置为fixed,然后再设置定位属性(方向)。
  • 4、z-index元素
    通过z-index元素进行设置优先级,通过z-index来控制元素的堆叠顺序,取值为数字,值越大优先级越高。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>定位</title><!--<link rel="stylesheet" type="text/css" href="css/01.css" />--><style>#zhu{width: 900px;border: 1px solid red;position: relative;}.div1{width: 100px;height: 80px;background-color: aqua;position: relative;/* 相对定位 */top: 30px;left: 60px;z-index: -6;}.div2{width: 100px;height: 80px;background-color: bisque;position: absolute;left: 180px;bottom: 80px;z-index: -9;}.div3{width: 100px;height: 80px;background-color: cadetblue;position: fixed;bottom:20px;left: 100px;}.div4{width: 100px;height: 80px;background-color: chartreuse;}</style></head><body><div id="zhu"><div class="div1">第一个盒子</div><div class="div2">第二个盒子</div><div class="div3">第三个盒子</div><div class="div4">啥也不做</div></div></body>
</html>

在这里插入图片描述

总结

以上就是近期的学习,不足之处还望指点。未完待续…

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com