CSS基础用法

最新推荐文章于 2024-04-26 16:58:59 发布
最新推荐文章于 2024-04-26 16:58:59 发布
阅读量140 收藏
点赞数
文章标签： css html web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cherry12100511/article/details/104835080
版权 
1.行内添加
  <p style="color: red">
  	天使投资指早期投资，尤其指个人早期投资
  </p>
2.内嵌样式
<!DOCTYPE html>
<html>
<head>
	<title>CSS</title>
	<style type="text/css">
		p{
			color: red;
		}
	</style>
</head>
<body>
  <p>
  	天使投资指早期投资，尤其指个人早期投资
  </p>
</body>
</html>
3.单独文件
4.优先级  就近原则
5.标签选择器
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>mysite</title>
<style type="text/css">
	body{
		background-color: #ccc;
		text-align: center;
		font-size: 12px;
	}
	h1{font:"黑体";font-size: 20px;}
	p{color: red;font-size: 15px;}
	hr{width: 200px;}
</style>
</head>
<body>
	<h1>武汉加油</h1>
	<hr>
	<p>中国加油</p>
	2020/2/7
</body>
</html>
6.类别选择器
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>mysite</title>
	<style type="text/css">
		p {font-size: 12px;}
		.one{font-size: 18px;}
		.two{font-size: 24px;}
	</style>
</head>
<body>
	<p class="one">one</p>
	<p class="one">one</p>
	<p class="two">two</p>
	<p class="two">two</p>
	<p>putong</p>
</body>
</html>
7.ID选择器<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>mysite</title>
	<style type="text/css">
		p {font-size: 12px;}
		#one{font-size: 18px;}
		#two{font-size: 24px;}
	</style>
</head>
<body>
	<p id="one">one</p>
	<p id="two">two</p>
	<p>putong</p>
</body>
</html>
8.ID选择器 与class的区别唯一性
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>mysite</title>
	<style type="text/css">
		p {font-size: 12px;}
		#one{font-size: 18px;}
		#two{font-size: 24px;}
	</style>
</head>
<body>
	<p id="one">one</p>
	<p id="two">two</p>
	<p>putong</p>
</body>
</html>
9.嵌套声明
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>mysite</title>
	<style type="text/css">
		p span{
			color: red;
		}
	</style>
</head>
<body>
	<p><span>武汉加油</span>中国加油</p>
</body>
</html>
10.集体声明
<style type="text/css">
	h1,p{text-align: center;}
</style>
11.全局声明
<style type="text/css">
	*{text-align: center;}
</style>
12.混合
13.单位
14.颜色 rgb
15.文本
color 文本颜色    letter-spacing 字符间距      line-height 行高
text-align 对齐     text-decoratin 装饰线        text-indent 首行缩进
font 在一个声明中设置所有的字体属性(font:italic bold 16px/1.5em 宋体)
font-family 字体系列     font-size  字号        font-style 斜体(italic)     font-weight 粗体(bold)

16.背景属性
url("logo.jpg")
repeat 横向纵向都填充     repeat-x 横向填充  no-repeat 一张图      repeat-y 纵向填充
17.链接的四种状态
a:link 普通的、未被访问的链接  a:visited 用户已访问的链接
a:hover 鼠标指针位于链接的上方悬停  a:active 链接被点击的时刻
:伪类选择器
18.a:hover 必须位于a:link a:visited后面
     a:active 必须位于a:hover之后
19.鼠标悬停放大字体
a{
       font-size:22px;
}
a:hover{
       font-size:120%;
}
<a href="#">web design</a>
20.无序列表ul 有序列表ol
list-style
list-style-image 为列表项标志设置图像
list-style-position 标志的位置
list-style-type 标志的类型
21奇偶选择器
tr:nth-child(odd){
	background-color:#EAF2D3;
}
一个爱吃鱼的兔子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端零基础学习html+css基础用法和常用语法
03-31
自己对html和css的一点点小总结，归纳出了我自己对html的理解，以及对我自己常用css样式 的结合
css部分样式设置
weixin_43964947的博客
11-03 111
2019年11月3日 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>mysite</title> <style> *{ padding:0;/*默认样式进行清零 */ margin:0;/* 默认样式进行清零*...
Div+CSS基础用法整理.pdf
11-26
...
Div+CSS基础用法整理.docx
11-26
...
css基础教程之CSS基础语法
01-19
如<p xss=removed>divcss8，但是这种方法并不是被我们推荐的，因为不利于实现表现与结构分离。也为后期维护带来很多不必要的困难。我们只需要知道即可。 内嵌样式：针对当前一个网页可以使用的样式，一般写在html的&...
JavaWeb——css基础知识与它的三种使用方法和三种选择器
01-08
什么是css css，全称Cascading Style Sheets，中文名：层叠样式表。它是一种用来表现（表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等）HTML或XML等文件样式的计算机语言，是用于增强控制网...
【CSS】grid 布局一行自动填充，每行最大限定px
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
04-23 322
【代码】【CSS】grid 布局一行自动填充，每行最大限定px。
CSS基础——1.CSS样式
weixin_66370632的博客
04-23 690
CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等。css的主要作用是定义网页的样式 CSS样式 1. 行内样式 行内样式：直接定义在 HTML 标签的 style 属性中
SCSS的基本使用(一)
大圣归来圣骑士清欢的博客
04-22 511
SCSS的基本使用、语法
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1078
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
2分钟自己写小游戏：使用js和css编写石头剪刀布小游戏、扫雷小游戏、五子棋小游戏。新手老手毕业论文都能用。
m0_68335484的博客
04-23 1365
2分钟自己写小游戏：使用js和css，快捷编写剪刀石头布游戏源代码、扫雷源代码、五子棋。新手老手毕业论文都能用。使用的都是简单的js和css代码，实现了这三款小游戏，复制就能用。一看就能懂。这里分享一下。下次继续。
CSS文本样式
qq_41807399的博客
04-23 467
CSS中使用text-align属性来定义文本的水平的对其方式。left：左对齐right：右对齐center：居中对齐justify：两端对齐将块状元水平居中需要使用margin属性，将左右两边都设置成自动时，块状元素会自动居中。CSS使用vertical-align属性定义文本的垂直对齐问题auto属性值根据layout-flow属性值定义对齐对象的内容baseline：表示对象内容与基线对齐sub表示垂直对齐文本的下标super表示垂直对齐文本的上标。
深入探索CSS中的渐变艺术：线性渐变、径向渐变与锥形渐变详解
最新发布
艾恩小灰灰的博客
04-26 489
CSS渐变技术为网页设计带来了无尽的可能性，通过合理地运用线性渐变、径向渐变和锥形渐变，可以增强网页元素的视觉表现力，创造出生动多彩的用户体验。随着浏览器对CSS标准支持的不断升级，渐变效果的应用将更加广泛和灵活。记得在实际项目中检查浏览器兼容性，并根据需要添加相应的前缀以确保跨浏览器兼容。
PostCSS详细介绍
技术探秘者的博客
04-26 1003
PostCSS是一个强大的CSS处理工具，它可以用来转换、优化和格式化CSS代码。与传统的预处理器（如Sass和Less）不同，PostCSS不是一种新的CSS语法，而是一个基于JavaScript插件的工具，可以灵活地扩展和定制。本书将详细介绍PostCSS的原理、用法和常见插件，帮助读者快速掌握PostCSS的使用技巧和优化方法。
PostCss 概述
宁夏前端工程师，马卫斌，wx：1457508895
04-23 505
PostCSS 通过其灵活的插件架构，将 CSS 处理能力从单纯的样式编写扩展到了代码验证、现代化、优化等多个层面。它作为一个高度可定制的中间层，能够无缝衔接现有工作流，帮助开发者编写更高效、更易于维护、更具备前瞻性的 CSS 代码，同时确保了跨浏览器的兼容性。
CSS的布局模式
qq_60624992的博客
04-26 1284
虽然我们可以通过普通流来实现一行多个div，但是过于麻烦而且行块内存在缝隙，并且有很多的布局无法通过标准流来实现。优点：书写简单缺点：无意义标签较多导致结构化较差优点：简洁，方便缺点：溢出的内容无法显示出来优点：结构语义化缺点：IE6-7不支持，需要使用zoom：1优点：结构语义化缺点：IE6-7不支持，需要使用zoom：1。
css设置子元素在父元素中水平垂直居中
qq_39454432的博客
04-23 451
css设置子元素在父元素中水平垂直居中的方法
CSS基础选择器
bengbeng2345的博客
04-23 814
h1,p,...所有元素{margin: 0px;}（消除默认边框的影响）标签内容（常用于去除页面标签默认的margin和padding）标签内容优先级：ID选择器>类选择器>标签选择器。
CSS - 定位详解
sodakii的博客
04-23 269
是 CSS 中的一种定位属性，用于创建一个相对定位的元素，当滚动到特定位置时会固定在屏幕上。可以在需要元素在滚动时保持固定位置的情况下使用，提供了一种简单而有效的方法来实现这种效果。2. 指定 top、bottom、left 或 right 中的至少一个值来定义元素固定时的位置。CSS 定位是一种控制元素在页面中的位置的方法。通过这些定位属性，可以精确控制元素在页面中的位置和布局。1. 将元素设置为 position: sticky;
html和css基础知识
09-17
另外，HTML还有一些常用的标签，如div、p、span、img、a、ul、li、table、form等，它们用于定义不同的内容和元素，并且可以使用各种属性来控制它们的样式和行为。HTML表单是用于收集用户输入数据的一种方式，它包含...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值