第四次网页前端培训（CSS常用属性与盒子模型）
2024-04-03 21:30:48
CSS常用属性
背景
<head><meta charset="utf-8"><title>常用属性设置</title><style type="text/css">#mydiv1{width: 200px;height: 200px;/*背景颜色*/background-color: aquamarine;/*背景图片*/background-image: url(img/搜索.png);/*是否重复*/background-repeat: repeat-x;/*x轴重复；y轴重复；no-repeat不重复*/}</style></head><body><div id="mydiv1">HELLO</div><div id="mydiv2">HI</div></body>
字体
<head><meta charset="utf-8"><title>常用属性设置</title><style type="text/css"> #mydiv2{/*字体颜色*/color: #A52A2A;/*对齐方式*/text-align: left;/*文本修饰（中划线上划线下划线之类的）*/text-decoration: line-through overline;/*上划线和中划线同时出现*//*文本首行缩进*/text-indent: 2em;}a{text-decoration: none;/*去除链接的下划线*/}</style></head><body><div id="mydiv1">HELLO</div><div id="mydiv2">HI GIRL</div><a href="https://www.baidu.com/">百度一下</a></body>
对齐方式（左，右，中，两端对齐）
<head><meta charset="utf-8"><title>常用属性设置</title><style type="text/css">#p1{/*对齐方式*/text-align: justify;/*两端对齐*/}</style></head><body><p id="p1">站在历史的海岸漫溯那一道道历史沟渠：楚大夫沉吟泽畔，九死不悔；魏武帝扬鞭东指，壮心不已；陶渊明悠然南山，饮酒采菊……他们选择了永恒，纵然谄媚诬蔑视听，也不随其流扬其波，这是执著的选择；纵然马革裹尸，魂归狼烟，只是豪壮的选择；纵然一身清苦，终日难饱，也愿怡然自乐，躬耕陇亩，这是高雅的选择。在一番选择中，帝王将相成其盖世伟业，贤士迁客成其千古文章。</p></body>
display属性
<head><meta charset="utf-8"><title>常用属性设置</title><style type="text/css">h3{/*display属性*/display: none;/*隐藏*/}</style></head><body><hr><h3>hello world</h3></body>
浮动
<head><meta charset="utf-8"><title>常用属性设置</title><style type="text/css">/* 浮动 */#d1{width: 6.25rem;height: 6.25rem;background-color: #FAEBD7;float: left;}#d2{width: 6.25rem;height: 6.25rem;background-color: #FFA500;float: left;}</style></head><body><div id="d1"> </div> <div id="d2"> </div></body>
盒子模型
border（边框）
<head><meta charset="utf-8"><title>盒子模型</title><style type="text/css"> #d1{width: 100px;height: 100px;background-color: #ffaaff;/* 设置边框颜色 */border: #aa557f 5px outset;}</style></head><body><div id="d1"></div> </body>
padding（内边距，默认顺序上右下左，冒号后两个值左右一样，上下一样）
<head><meta charset="utf-8"><title>盒子模型</title><style type="text/css"> #d1{width: 100px;height: 100px;background-color: #ffaaff;/* 设置边框颜色 */border: #aa557f 5px outset;/* 设置内边距 */padding:20px 10px;}</style></head><body><div id="d1"></div> </body>
margin（外边距）
<head><meta charset="utf-8"><title>盒子模型</title><style type="text/css"> #d1{width: 100px;height: 100px;background-color: #ffaaff;/* 设置边框颜色 */border: #aa557f 5px outset;/* 设置内边距 */padding:20px 10px;/* 设置外边框 */margin-top: 100px;margin-left: 100px;}</style></head><body><div id="d1"></div> </body>
第四次网页前端培训（CSS常用属性与盒子模型）相关推荐
- 第四次网页前端培训(CSS)
1. 视频链接 [优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili 2. 教程链接 CSS 下拉菜单 | 菜鸟教程 ...
- 第四次网页前端培训（CSS常用属性和盒子模型）
学习网址:[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibilin 1.安装编译器 VS Code:Visual St ...
- 从零开始学前端 - 5. CSS常用属性
作者: 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享 每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
- 第四次网页前端培训笔记（css常用属性设置）
4.1.背景 4.1.1.background-color(设置元素的背景颜色) <style type="text/css">#div1{width: 100px;h ...
- 5中div标签有没有url属性_[网页编程]-03 CSS 常用属性
字体处理常用属性 <!DOCTYPE html> <html><head><meta charset="utf-8"><tit ...
- 前端：CSS/13/HTML引入CSS的方法，CSS表格属性，盒子模型，上下外边距合并
HTML引入CSS的方法 1,嵌入式 通过<style>标记,来引入CSS样式: 语法格式:<style type="text/css"></styl ...
- 【网页前端】CSS常用布局之定位
- css规则中区块block,css常用属性总结：背景background下篇
前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...
- 第一次网页前端培训笔记（Html基础语法和常用标签）
一.什么是HTML HTML 是用来描述网页的一种语言.HTML 是一种在 Web 上使用的通用标记语言.HTML 允许你格式化文本,添加图片,创建链接.输入表单.框架和表格等等,并可将之存为文本文件 ...
最新文章
- css删除线_前端删除文字贯穿线的方法有哪些
- What is a lambda expression in C++11?
- python动态图-不就是用Python做个动态图吗？看招
- Python 中文分词(结巴分词)
- webpack配置es6开发环境
- android头部固定悬停,Android开发上滑悬停且头部可刷新
- 自定义错误代码和提示信息
- CodeForces - 830C Bamboo Partition(数学+推公式)
- asp.net core 3.x Endpoint终结点路由1-基本介绍和使用
- Socket通用TCP通信协议设计及实现（防止粘包，可移植，可靠）
- SQLServer 数据库主体在该数据库中拥有 架构,无法删除解决方法
- 谷歌Chrome 紧急修复已遭利用的两个0day
- 05 - Django应用第二步
- 永久关闭iptables和selinux
- FTP、FTPS 与 SFTP 简介
- Leetcode第412题——Fizz Buzz
- OpenStack在天河二号的大规模部署实践（转）
- 基于SpringBoot+Vue前后端分离的在线教育平台项目
- 邮件发送求职简历四大注意事项
- STM32之RGB灯仿真