CSS常用样式属性有哪些?代码怎么写?
CSS常用样式属性有哪些?CSS样式属性有两种分别是局常用样式属性和文本常用样式属性,CSS的作用是美化HTML网页和控制页面布局,我们需要掌握这两种常用的样式属性来美化页面。一套教程,带你轻松掌握HTML+CSS。
前端零基础html5+css3+前端项目视频教程
CSS常用样式属性有哪些
1、布局常用样式属性
•width设置元素(标签)的宽度,如:width:100px;
•height设置元素(标签)的高度,如:height:200px;
•background设置元素背景色或者背景图片,如:background:gold;设置元素的背景色,background:url(images/logo.png);设置元素的背景图片。
•border设置元素四周的边框,如:border:1pxsolidblack;设置元素四周边框是1像素宽的黑色实线
•以上也可以拆分成四个边的写法,分别设置四个边的:
•border-top设置顶边边框,如:border-top:10pxsolidred;
•border-left设置左边边框,如:border-left:10pxsolidblue;
•border-right设置右边边框,如:border-right:10pxsolidgreen;
•border-bottom设置底边边框,如:border-bottom:10pxsolidpink;
•padding设置元素包含的内容和元素边框的距离,也叫内边距,如padding:20px;padding是同时设置4个边的,也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。
•margin设置元素和外界的距离,也叫外边距,如margin:20px;margin是同时设置4个边的,也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom。
•float设置元素浮动,浮动可以让块元素排列在一行,浮动分为左浮动:float:left;右浮动:float:right;
2、文本常用样式属性
•color设置文字的颜色,如:color:red;
•font-size设置文字的大小,如:font-size:12px;
•font-family设置文字的字体,如:font-family:‘微软雅黑’;为了避免中文字不兼容,一般写成:font-family:‘MicrosoftYahei’;
•font-weight设置文字是否加粗,如:font-weight:bold;设置加粗font-weight:normal设置不加粗
•line-height设置文字的行高,如:line-height:24px;表示文字高度加上文字上下的间距是24px,也就是每一行占有的高度是24px
•text-decoration设置文字的下划线,如:text-decoration:none;将文字下划线去掉
•text-align设置文字水平对齐方式,如text-align:center设置文字水平居中
•text-indent设置文字首行缩进,如:text-indent:24px;设置文字首行缩进24px
3、布局常用样式属性示例代码布局常用样式属性
4、文本常用样式属性示例文本常用样式属性示例
CSS样式属性小结:设置不同的样式属性会呈现不同网页的显示效果,样式属性的表现形式是:属性名:属性值。
CSS常用样式属性有哪些?代码怎么写?相关推荐
- CSS常用样式属性锦集
以下快捷键针对webstorm,idea也可以用 一.文字属性 1.文字样式属性 格式:font-style: italic; 取值:normal:正常显示 italic:斜体 快捷键: fs fon ...
- (6)css常用样式属性--文字样式
一.color属性 1.1color属性的作用 用来设置文字的颜色. 1.2颜色的表示法: 关键词表示:关键词就是颜色名,其实就是使用颜色的英文单词进行表示.例如red(红色),green(绿色),b ...
- (8)css常用样式属性3
一.水平对齐 text-align 作用:设置文本水平方向的对齐. 在盒子中,不论文本是单行还是多行,都会对应方向对齐. 属性值:三个方向的单词. 示例: 二.文本修饰 text-decoration ...
- CSS常用样式属性(下)
outline 设置外边框,与border不同的是,outline设置的边框不占用空间,会自动浮起,text文本会有一个默认的border与outline边框 <body> <inp ...
- CSS - 常用样式属性(字体、文本、背景相关、鼠标)
- css样式lighter的意思,css常用的属性
CSS------属性值篇 display: none | block | inline(默认值) | inline-block(css2新增) | inherit none :此元素不会再显示 {注 ...
- WEB前端-CSS-选择器常用样式/属性
CSS 层叠样式表 CSS(Cascading Style Sheets)是一种用来表现 HTML(标准通用标记语言)或者XML(标准通用标记语言的一个子集)等文件样式的计算机语言. 关于更详细的 C ...
- html双箭头菜单,CSS常用样式之绘制双箭头的示例代码
一.多次调用单箭头 实现了单箭头–就很容易实现双箭头了,上文已经介绍2种实现单箭头的原理: 边框旋转方式.双三角覆盖方式.这次以边框旋转为例多次调用实现双箭头. 1.边框旋转单箭头实现 .arrow- ...
- css文字向右对齐_web前端入门到实战:css常用样式对文本的处理演练
CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...
最新文章
- 潘云鹤:人工智能走向2.0 | 全球青少年图灵计划首场大师公开课
- 【软件工程】CMMI 能力成熟度模型集成 ( CMMI 工程过程域 | CMMI 支持过程域 ) ★
- 如何避免开发一款失败的产品?
- 异构图-GTN(Graph Transformer Networks)
- 【机器学习】线性回归之梯度下降、多元线性回归概述
- HP_UX常用指令列表(转,整理过,方便使用)
- Python --之练习题
- 高通平台 Camera基础
- PowerShell命令行窗口中设置环境变量 (简介,以及与cmd、shell、linux命令对比)
- 把live2D模型放上网页
- 换IP软件如何使用,一起来看下换IP软件的使用教程
- 荣耀V40用机技巧有哪些
- java佳沃贴吧,十年沉淀 — 2019“JAVA(佳沃)杯”第十届凤凰山山地自行车挑战赛...
- 发展5G通信,测试先行
- 主编编辑器如何插入动图?
- Bean Definition 生成过程详解
- 【智能路由器】离线缓存投毒实现分析
- 该如何从教育行业转行做IT——我的真实经历给出的偏门答案
- Android恢复出厂命令
- PBN飞越转弯Flyover衔接DF航段保护区组图
热门文章
- Python 字节串比特串转换以及大小端相关的几个方法
- 制作可以启动的DVD ISO文件
- Spring Cloud微服务之eureka+client入门
- oracle表空间追加数据文件,oracle数据库表空间追加数据库文件方法
- 【附源码】Java计算机毕业设计高考志愿智能推荐系统(程序+LW+部署)
- s标签s:select下拉列表的使用
- 基于Win32的不规则透明窗口(模拟win7气泡屏保)——透明气泡的实现
- [转]ANR问题分析指南
- P1506 拯救oibh总部——区域染色问题(DFSBFS双解)
- Vue - 简约大气 404 页面