CSS样式

文章目录

一、样式结构

二、三种添加方式

三、选择器

id:在当前html文件中保持唯一;

四、盒子模型

五、 元素显示模式

块元素

独占一行,可以设置高度宽高,内外边距,默认是父级元素的高宽。
<h1>~<h6>、 <p>、<div>、<ul>、<li>

行元素

相邻行内元素在一行上,不可以设高度宽高,默认宽高是它本身内容的宽度。
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>

行内块元素

相邻行内元素在一行上,它们之间会有缝隙,一行可以显示多个。默认宽度是它本身内容的宽度,高度,宽度,内外边距可以控制。
<img>、<input>、<td>

样式说明

css 复制代码
---------------------------文字 & 文本
//字体样式
font-family:'Microsoft YaHei';
//字体粗细
font-weight:bold;
//字体倾斜 
font-style:itailc;
//文本水平对齐
text-align:center;
//文字垂直居中
//1.让文字的行高等于盒子的高度
height: 40px;
line-height:40px;
//装饰文本 下划线
text-decoration:underline;
//文本缩进
text-indent:2em;
//行间距
line-height:10px;
css 复制代码
---------------------------元素显示模式转换
//行内元素转换为块级元素
display:block;
//块级元素转换为行内元素
display:inline;
//转换为行内级元素
display:inline-block;
css 复制代码
---------------------------背景颜色
//背景颜色透明
background-color:transparent;
//背景平铺
background-repeat:no-repeat 
//改变图片在背景中的位置
background-position:center top;
background-position:20px 50px;
//背景固定
background-attachment:fixed;
//背景颜色半透明
background:rgba(0,0,0,0.3);
css 复制代码
---------------------------盒子模型
//盒子边框粗细
border-width:5px
//盒子边框样式
border-style:solid;
//盒子边框颜色 
border-color:red;
//相邻边框合并
border-collapse:collapse;
//内边距--会撑开盒子 
padding: top,right,bottom,left;
//外边距
margin: top,right,bottom,left;
//块级元素水平居中
margin:0 auto;
//行内元素 & 行内块元素水平居中 【给父元素添加】
text-aligin:center;
//外边距合并,嵌套块元素外边距塌陷的问题解决办法【给父元素添加】
情况:父元素有margin,子元素也有margin。
1.border:1px solid transparent;
2.padding:1px;
3.overflow:hidden;
//清除元素默认内外边距
* {
	 margin :0;
	 padding:0;
 }
//

选择器学习网站

相关推荐
我想说一句5 分钟前
React Router奇幻漂流记:懒加载、鉴权与404大冒险
前端·javascript·前端框架
袁煦丞13 分钟前
ONLYOFFICE让局域网外也能实时轻松协作?cpolar内网穿透实验室第510个成功挑战
前端·程序员·远程工作
止观止16 分钟前
深入学习前端 Proxy 和 Reflect:现代 JavaScript 元编程核心
前端·javascript·学习
ChongYu重玉18 分钟前
【node/vue】css制作可3D旋转倾斜的图片,朝向鼠标
javascript·css·vue.js·经验分享·笔记·node.js·vue
yuanmenglxb200423 分钟前
浏览器渲染原理
前端·面试·浏览器渲染原理
薛定谔的算法23 分钟前
猜你想不到SPA相比于传统页面的6个特点
前端·javascript·react.js
ui设计前端开发老司机23 分钟前
从数据洞察到设计创新:UI前端如何利用数字孪生提升产品交互体验?
前端·ui·交互
3Katrina29 分钟前
《解锁现代Web开发:SPA核心原理与性能优化实战》
前端·javascript
伍哥的传说32 分钟前
React强大且灵活hooks库——ahooks入门实践介绍
前端·react.js·前端框架·ahooks·useclickaway·userequest·usedebouncefn
EndingCoder33 分钟前
图算法在前端的复杂交互
前端·算法·图算法