菜单 搜索
首页 前端知识 CSS学习（一）

CSS学习（一）

2024-04-29 12:04:50 前端知识 前端哥 478 121 我要收藏

一、CSS简介

        CSS（层叠样式表，Cascading Style Sheets）是一种用来描述HTML或XML（包括SVG等）文档的样式的语言。CSS描述了文档的样式，如字体、颜色、间距和布局等。通过将样式与文档分离，CSS使开发者可以更好地控制文档的外观和布局，同时也提高了文档的可维护性和可复用性。

        CSS作用：就是通过编码方式，对Html页面的各种标签元素进行样式控制。

二、基础语法

1. CSS三种引入方式        

  • 外部样式表（.css文档中定义）

  • 内部样式表（head中定义）

  • 内联样式（在标签上定义）

  • 注：三种方式的优先级： 内联样式 > 内部样式表 = 外部样式表

2. CSS语法

CSS 规则由两个主要的部分构成：

  • 选择器：指定将要添加样式的 HTML元素的方式。可以使用标签名，class值，id值等多种方式。

  • 声明：形式为属性(property):值(value)，用于设置特定元素的属性信息，可以设置多个声明，多个声明之间用英文的分号";"隔开。

selector{  // 选择器
	property1:value1;  //声明
	property2:value2;
	property3:value3;
}

示例：

/* 给h2标签设置前景色为红色，字体大小14像素 */
h2{
    color:red;
    font-size:14px;
}

3. 入门案例

  • 目标

    设置h1标签内容的颜色。

  • html代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>入门案例</title>
	</head>
	<body>
		<h1>学习CSS</h1>
	</body>
</html>
  • 样式设置

        内敛样式 ，在行内直接设置CSS属性。

<!-- 内联样式 -->
<h1 style="color: red;">学习CSS</h1>

        内部样式：在head标签中添加style标签，在style中集中设置CSS样式。

<!-- 内部样式 -->
<style>
	h1{
		/* color: red; */ /*英文单词写法*/
				
		/* color: #ff0000; */ /*十六进制写法，可以使用缩写#ff00*/

		/* color: #ff00; */ /*十六进制缩写写法*/
				
		/* color: rgb(255, 0, 0); */ /*rgb写法，rgb颜色值分为三组， 第一组代表红色、第二组代表绿色、第三组代表蓝色。每一组的取值范围是0 - 255*/

		/* color: rgb(100%,0%,0%); */ /*rgb百分比写法*/

		color: rgb(100%,0%,0%,.1);  /*rgb百分比写法，带透明度*/
	}
</style>

        外部样式：在项目的根目录创建css目录，在css目录中创建start.css文档，在文档中设置样式。

/* 想要实现同样的样式，可以有多种不同的书写方式 */

h1{
	/* color: red; */ /*英文单词写法*/
				
	/* color: #ff0000; */ /*十六进制写法，可以使用缩写#ff00*/

	/* color: #ff00; */ /*十六进制缩写写法*/
				
	/* color: rgb(255, 0, 0); */ /*rgb写法，rgb颜色值分为三组， 第一组代表红色、第二组代表绿色、第三组代表蓝色。每一组的取值范围是0 - 255*/

	/* color: rgb(100%,0%,0%); */ /*rgb百分比写法*/

	color: rgb(100%,0%,0%,.1);  /*rgb百分比写法，带透明度*/
}

        同时，要在html文件的head标签中使用link标签引入外部的css文件。

<link type="text/css" rel="stylesheet" href="css/start.css"/>

4. CSS选择器

        4.1. 基础选择器

  •     实现创建需要的HTML文件，再引入所需要的CSS文件。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS基础选择器</title>
		<link type="text/css" rel="stylesheet" href="index.css"/>
	</head>
	<body>
		<ul>
            /* 命名可能不太规范，可不要学我哦 */
			<li><h1>CSS</h1></li>
		    <li class="grey">CSS简介</li>	
		    <li id="css_selector">CSS选择器</li>
		    <li class="grey">CSS属性</li>
			<li my_attr="anli">CSS案例</li>
			<li id="yingyong">CSS应用</li>
		</ul>
	</body>
</html>
  •         通配选择器：

         可以匹配页面中的所有标签。

*{
    margin: 0;
    padding: 0; 
}
  •         标签选择器

         根据标签名称选中页面中指定的标签，会使所有相同类型标签的样式都改变。

/* margin-left：设置元素的左外边距 */
ul{
	margin-left: 40px;
}
h1{
	color: blue;
}
  •         ID选择器

        根据标签上的ID属性值来选中指定的标签，用 # 开头。

#css_selector{
	color: yellow;
}
  •         类选择器

        根据标签上的class属性值来选中所有带此class属性的标签，用 . 开头。

.grey{
	color: hotpink;
}
  •         属性选择器

        属性选择器可以根据标签上所携带的属性来选中标签，[属性名]  {  }  ，拥有此属性的标签都会设置成对应的样式 。


[my_attr]{
	color: orange;
}

/* [属性名="值"]{}  拥有此属性并且属性的值是对应的值的标签都会设置成对应的样式 */

[my_attr="anli"]{
	color: gainsboro;
}

[id="yingyong"]{
	color: aqua;
}

4.2. 进阶选择器

实现创建需要的HTML文件，再引入所需要的CSS文件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS进阶选择器</title>
		<link type="text/css" rel="stylesheet" href="index2.css"/>
	</head>
	<body>
		<div id="level1" class="level1_class">
			<h1>level1_标题1</h1>
			<h2>level1_标题2</h2>
			<h3>level1_标题3</h3>
			<h4>level1_标题4</h4>
			<h5>level1_标题5</h5>
			<h6>level1_标题6</h6>
			<div id="level11" class="level11_class">
				<h1>level11_标题1</h1>
				<h2>level11_标题2</h2>
				<h3>level11_标题3</h3>
				<h4>level11_标题4</h4>
				<h5>level11_标题5</h5>
				<h6>level11_标题6</h6>
			</div>
		</div>
		<div id="level2" class="level2_class">
			<p>level2_标题</p>
		</div>
		<p>level3_标题</p>
		<p>level4_标题</p>
		<p>level5_标题</p>
        
        <span id="test_id" class="test_class" attr="123">CSS样式优先级</span>
	</body>
</html>
  •         后代选择器

                使用示例：设置ID为level1的标签下面所有h2子元素的样式。

#level1 h2{
	color: red;
}
  •         子代选择器

                使用示例：设置ID为level1的标签下面的h3子元素的样式。

                注：和后台选择器的区别在于：只选择最近的子代元素。

#level1>h3{
	color: blue;
}
  •         同级选择器

             使用示例：选中class="level1_class"的元素后面所有的同级p标签，而前面的同级p标签不会被选择。

.level1_class~p{
	color: green;
}
  •         相邻兄弟选择器

                使用示例：选中所有class="level2_class"的元素后面最近的的同级p标签

.level2_class+p{
	background: yellow;
}
  •         伪类选择器
        :hover        

         当鼠标放到所有的p标签上时，将p标签的样式改变，当鼠标移开时，样式还原。


p:hover {
      background: lightpink;
      color: white;
}
  •         伪元素

 在selector元素内部的开头或结尾插入一个伪元素

       before：在标签的所有内容的前面添加内容。

       after：在标签的所有内容的后面添加内容。

4.3. 选择器分组

可以通过使用英文的逗号","将多个选择器连接到一起，同时给多个符合的元素设置统一的样式

 例如：把很多元素显示为灰色，可以使用类似如下的规则

h6,.level1,#level2{
	background: gray;
}

4.4. 选择器优先级

优先级只有在单selector场景中比较才有意义。

优先级排名：

第一名：ID选择器
第二名：属性选择器/类选择器
第三名：标签选择器
第四名：通配选择器

三. CSS样式

1. 背景相关样式

在项目的css目录中创建css_background.css文档。

#css_background{
	width: 1200px;
	height: 800px;
}

创建Html页面，引入css_background.css文件，内容如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS背景样式</title>
		<link type="text/css" rel="stylesheet" href="css/css-background.css"/>
	</head>
	<body>
		<div id="css_background">
			
		</div>
	</body>
</html>
  • background-color：设置背景色
background-color: orange;

background-image：设置背景图片

background-image: url(1.jpg);

background-position：设置背景图片的起始位置，背景图像如果要重复，将从这一点开始

background-position:bottom center;

background-repeat：设置背景图片是否及如何重复

/* 背景图片重复方式及是否重复  no-repeat：不能重复   repeat-x：
横向重复  repeat-y：竖向重复*/
background-repeat: no-repeat;

background-size：设置背景图片的尺寸

/* 背景图片大小 */
/* background-size: 800px 500px; */
background-size: 50% 50%;
  • background-attachment：设置背景图片是固定还是随着页面的其余部分滚动
/* background-attachment: scroll; */
background-attachment: fixed;
  • background: 简写属性，将上面列出的背景相关的多个属性设置在一个声明中（推荐）
background: yellow url(1.jpg) bottom center no-repeat scroll;

2. 文本相关样式

在项目的css目录中创建css_text.css文档。

#css_text{
	width: 500px;
	height: 100px;
	background: yellow;
}

创建Html页面，引入css_text.css文件，内容如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS文本样式</title>
		<link type="text/css" rel="stylesheet" href="css/css-text.css"/>
	</head>
	<body>
		<div id="css_text">
			CSS文本样式
		</div>
	</body>
</html>
  • 文本缩进 text-indent
#css_text{
	text-indent: 100px;
}
  • 水平对齐 text-align
/* left：水平左对齐 right：水平右对齐 center：水平居中对齐 */
text-align: center;
  • 行高 line-height

        当块元素中只有一行文本时，将行高设置为容器的高度，可实现垂直方向上的居中

line-height: 100px;
  • 词间隔 word-spacing
/* 词间隔，词语之间需要有空格 */
word-spacing: 2em;
  • 字母间隔 letter-spacing
/* 字符间隔，不需要空格 */
letter-spacing: 2em;
  • 大小写转换 text-transform
/* 大小写转化  lowercase：大写转小写  uppercase：小写转大写*/
text-transform: lowercase;
  • 文本装饰 text-decoration
/* 文本装饰  line-through：定义穿过文本的一条线。overline：定义文本上的一条线  underline：定义文本下的一条线*/
text-decoration: line-through;
  • 空白字符处理 white-space
/* 空白字符处理*/
white-space: nowrap;
  • 文本阴影 text-shadow
/* 文本阴影  x距离,y距离,模糊,颜色*/
text-shadow: 2px 2px 8px red;

3. 字体相关样式

  • 设置字体 font-family
  • 字体大小 font-size
  • 字体粗细 font-weight
  • 字体风格 font-style

4. 尺寸相关样式

  • 设置宽度 width

  • 设置高度 height

  • 设置最大宽度 max-width

  • 设置最大高度 max-height

  • 设置最小宽度 min-width

  • 设置最小高度 min-height

5. 链接相关样式

  • 链接的四种状态（本质上其实就是给a标签设置伪类选择器）：

    • a:link - 普通的、未被访问的链接

    • a:visited - 用户已访问的链接

    • a:hover - 鼠标指针位于链接的上方

    • a:active - 链接被点击的时刻

6. 列表相关样式

  • 列表标记的类型：list-style-type
  •  将列表符号设置为图像 list-style-image

7. 表格相关样式

  • 设置边框线宽度

  • 设置边框线颜色

  • 设置边框线样式

  • 合并重复边框 border-collapse

  • 单元格与内容之间空白的距离 border-spacing

  • 表格标题的位置 caption-side

四. 修改元素默认显示行为

转化为行内元素(内联元素)显示： inline

display: inline;

转化为块级元素显示：block

display: block;

转化为行内块显示：inline-block

display: inline-block;

不显示：none

display: none;

五. 清除默认样式

不同的浏览器默认的样式可能不尽相同，所以开发时的第一件事可能就是如何把它们统一。如果没清除默认的CSS样式往往会出现浏览器之间的页面差异。

每次新开发网站或新网页时候通过初始化CSS样式的属性，可以让用到的CSS或html标签更加方便准确，使得我们开发网页内容时更加方便简洁，同时减少CSS代码量，节约网页下载时间。

html {
	color: #000;
	background: #FFF;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
	margin: 0;
	padding: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

fieldset,
img {
	border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
	font-style: normal;
	font-weight: normal;
}

ol,
ul {
	list-style: none;
}

caption,
th {
	text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
}

q:before,
q:after {
	content: '';
}

abbr,
acronym {
	border: 0;
	font-variant: normal;
}

sup {
	vertical-align: text-top;
}

sub {
	vertical-align: text-bottom;
}

input,
textarea,
select {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	*font-size: 100%;
}

legend {
	color: #000;
}

转载请注明出处或者链接地址：https://www.qianduange.cn//article/6626.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

jQuery Ajax 设置请求头

2024-05-08 10:05:25

玩转代码|WordPress后台加载缓慢，加载无样式解决方法

2024-05-08 10:05:20

【JS】使用jQuery制作图片手风琴效果

2024-05-08 10:05:18

h5实现i18n语言切换

2024-05-08 10:05:17

【前端面试】谈谈你对jQuery中的ajax方法的了解

2024-04-20 17:04:44

jQuery报错：Uncaught ReferenceError: $ is not defined解决方法

2024-05-08 10:05:14

JQuery的属性(1)

2024-05-08 10:05:57

jQuery

2024-01-31 12:01:10

jQuery操作指南

2024-05-08 10:05:51

echarts3d柱状图

2024-05-08 10:05:50

大家推荐的文章
1

UE4.27支持HTML5

2024-05-07 13:05:261000
2

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000
3

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
4

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
5

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
6

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
7

移动端css布局大全

2024-02-06 15:02:421000
8

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
9

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
10

vue3的两个提示[Vue warn]: 关于组件渲染和函数外部使用

2024-05-05 22:05:07999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！