位置: IT常识 - 正文

CSS样式(css样式居中)

编辑:rootadmin
css概述 层叠样式表(cascading style sheet) 层叠是指==将多个样式施加在一个元素(标签)上== 作用: 美化页面 将html代码与样式代码分离 好处: 功能强大 分离代码,降低耦合性,提高重用性,提高维护性,提高开发效率 使用方法 1、在HTML标签的style属性书写,这 ... css概述

推荐整理分享CSS样式(css样式居中),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css样式规则,css样式规则,css样式规则是由选择器和声明构成,css样式表,css样式优先级,css样式表的三种样式,css样式代码大全,css样式表的三种样式,内容如对您有帮助,希望把文章链接给更多的朋友!

层叠样式表(cascading style sheet)

层叠是指==将多个样式施加在一个元素(标签)上==

作用:

美化页面将html代码与样式代码分离

好处:

功能强大分离代码,降低耦合性,提高重用性,提高维护性,提高开发效率使用方法

1、在HTML标签的style属性书写,这个属性的值,是由一些小的键值对构成

<div>12345</div>缺点:有可能出现代码冗余标签属性多,耦合高,不便于维护CSS样式(css样式居中)

2、在页面head标签中添加style标签

<style> div { color:yellow; font-size:500px; }</style>

3、在head标签中添加link标签引入css文件

<link rel="stylesheet" href="https://www.cnblogs.com/am0304/p/css%E6%96%87%E4%BB%B6%E5%9C%B0%E5%9D%80" />使用时机:方式一:由于样式设置是写在标签内的,它只能给这个一个标签施加样式,当我们只需要给一个标签施加样式的时候,就可以选择使用第一种方式方式二:由于样式是写在style 标签,在style标签里面写的是选择器,所以它可以给多个标签施加相同的样式当我们需要给一个页面中的多个标签施加相同的样式的时候,我们就可以选择使用第二种方式三:由于该方式,是引入了外来的css文件,说明引入css文件,就可以使用该样式了,当我们需要给多个页面中的多个标签施加相同的样式的时候,我们就可以选择使用第三种==推荐使用第二种和第三种==盒子模型

对页面进行布局(div + css)

padding:设置内补丁padding:不同参数代表位置一个参数:上下左右两个参数:上下 左右三个参数:上 左右 下四个参数:上 右 下 左

默认情况,如果我们设置内补丁,会影响到整个盒子的大小,那我们需要设置一个属性box-sizing: border-box

margin:设置外补丁margin:不同参数代表位置一个参数:上下左右两个参数:上下 左右三个参数:上 左右 下四个参数:上 右 下 左float浮动

会打破默认的流式布局,一般建议,如果一个元素进行了浮动,其余的和该元素同级别的也进行浮动。

left:从左浮动right:从右浮动position定位静态定位(static):默认值,没有定位,元素不会受到top,bottom,left,right影响固定定位(fixed):元素相对于浏览器窗口是固定位置相对定位(relative):相对定位元素的定位是相对其原来位置的偏移量绝对定位(absolute):绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的相对于父元素也需要使用绝对定位z-index:显示优先级,数值越大,越靠上opacity:透明度,0完全透明,1完全不透明属性尺寸

支持百分比或者像素

width:宽度height:高度display:可见性文本(字体)color:字体颜色font-size:字体大小font-family:字体样式font-weight:字体粗细font-style:倾斜(italic)text-align:水平对齐方式line-height:行高,文字垂直位置的处理text-shadow:x轴偏移量 y轴的偏移量 羽化效果 阴影颜色:文本阴影text-decoration:文本下划线背景background-color:背景颜色background-image:url(背景图片)background-repeat:是否平铺图片(no-repeat、repeat-x、repeat-y)background-position:背景图片位置(水平偏移量 垂直偏移量)backgroud-image:linear-gradient(to 方向,开始颜色,结束颜色):渐变背景色box-shadow:x轴偏移量 y轴的偏移量 羽化效果 阴影颜色:盒子阴影background-size:背景图片大小边框border-left、right、top、bottom:宽度 颜色 样式border-color:颜色border-width:粗细border-style:样式border-radius:边框圆角border-collapse:边框间距合并border-spacing:属性指定相邻单元格边框之间的距离outline:点击轮廓box-sizing:border-box:设置相邻边框覆盖选择器

可以帮助我们快速定位到某一个或者某几个标签的,就称为选择器

格式:

选择器 { 小键值对; ... ... }元素选择器标签名{ 样式属性 key:value;}ID选择器#ID{ 样式属性 key:value;}类选择器.类名{ 样式属性 key:value;}

优先级:id选择器 > 类选择器 > 元素选择器

组合选择器选择器,选择器,选择器{ 样式属性 key:value;}后代选择器父标签 后代标签 { 样式属性 key:value;}子元素选择器父标签>子标签 { 样式属性 key:value;}兄弟选择器/*同等级的,标签1后方的*/标签1~标签2{ 样式属性 key:value; }相邻选择器/*同等级的,标签1后方的第一个标签*/标签1+标签2{ 样式属性 key:value;}伪类选择器标签:link{ 标签未被访问前的样式属性 key:value;}标签:hover{ 鼠标悬停的标签样式属性 key:value;}标签:visited{ 标签已被访问后的样式属性 key:value;}标签:active{ 鼠标点击标签未释放的样式属性 key:value;}标签:last-child{ 最后一个该标签的子标签样式属性 key:value;}标签:first-child{ 第一个该标签的子标签样式属性 key:value;}标签:nth-child(n){ 该标签的父标签的第n个该类子标签的样式属性 key:value;}属性选择器标签[key='value']{ 样式属性 key:value; }标签[key*='a']{ 属性key的值包含a的标签的样式属性 key:value; }标签[key^='a']{ 属性key的值以a开头的标签的样式属性 key:value; }标签[key$='a']{ 属性key的值以a结尾的标签的样式属性 key:value; }标签[key~='hello']{ 属性key的值包含单词hello的标签的样式属性 key:value; }2D\3D转换2D/*从其当前位置移动元素*/transform: translate(横向, 纵向);/*旋转一定的角度*/transform:rotate(角度deg);/*增大或减小元素大小*/transform:scale(宽度增大倍数,高度增大倍数);3D/*元素绕其 X 轴旋转给定角度*/transform: rotateX(角度deg);/*元素绕其 Y 轴旋转给定角度*/transform: rotateY(角度deg);/*元素绕其 Z 轴旋转给定角度*/transform: rotateZ(角度deg);动画@keyframes 动画名{ from{开始样式} to{结束样式}}div{ animation:动画名 时间;}动画属性animation-name:规定 @keyframes 动画的名称。animation-play-state:规定动画是运行还是暂停。animation-duration:定义需要多长时间才能完成动画animation-delay:规定动画开始的延迟时间animation-iteration-count:动画应运行的次数,infinite无限animation-direction:属性指定是向前播放、向后播放还是交替播放动画

normal - 动画正常播放(向前)。默认值reverse - 动画以反方向播放(向后)alternate - 动画先向前播放,然后向后alternate-reverse - 动画先向后播放,然后向前animation-timing-function:规定动画的速度曲线
本文链接地址:https://www.jiuchutong.com/zhishi/313046.html 转载请保留说明!

上一篇:织梦dedecms做的网站首页标题篡改跳转赌博网站解决方案(织梦使用教程)

下一篇:phpcms文章浏览次数始终不变(php网站访问量大怎么优化)

  • 契税通过应交税费
  • 微信收入算现金流出吗
  • 减免税款年末有余额吗
  • 已导出的申报表如何修改
  • 发票右上角数字是什么
  • 销项税额是不是开出去的发票金额
  • 分公司企业所得税怎么缴纳
  • 抵债资产账务处理2021年
  • 环保罚款计入什么会计科目
  • 行政事业单位资产管理工作总结
  • 资产负债表的编制方法和步骤
  • 月末收到一批b材料,结算凭证未到,估价50000
  • 支付保安公司的钱违法吗
  • 一件商品若卖100元
  • 刻章发票可以抵税吗
  • 外资企业需要遵守哪些法律
  • 税控系统技术维护费
  • 如何降低房租
  • 关于企业所得税若干优惠政策的通知
  • 会计差错更正的准则依据
  • 报表中在产品填什么数据
  • 哪些费用可以税前扣除
  • 差额银行承兑汇票
  • win10自带播放器不见了
  • 折旧计算方法举例
  • 其他货币资金期末处理
  • PHP:xml_set_processing_instruction_handler()的用法_XML解析器函数
  • php导入
  • 政策性专项资金包括哪些
  • 借条未写还款期限,最长保护期是多久
  • win10怎么打开移动中心
  • 公司不运营了需要注销吗
  • PHP:spl_autoload_register()的用法_spl函数
  • php的超级全局变量
  • 餐费发票怎么做账务处理
  • 对外支付企业所得税计税依据
  • 纳税人跨县(市、区)提供建筑服务,应向建筑服务发生地
  • 业务招待费的账务处理金额
  • yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
  • 融资租赁增值税税目
  • vue项目中技巧知识点
  • vgchange命令
  • 转账支票适用范围
  • 员工宿舍的物业费能否抵扣
  • 预提成本应该如何结转
  • 个体工商户具体工作内容怎么写
  • 资产负债表和利润表的勾稽关系
  • 在建工程账务处理会计分录
  • 支付境外货款需要缴纳哪些税费
  • 办公桌椅入什么会计科目
  • 股权转让可行性
  • 生产中产生的废油漆桶等危险废物应当作为什么贮存
  • 咨询服务公司的经营范围
  • 员工的探亲费应由谁支付
  • 申请享受免税资金的条件
  • 医院收费单可以当发票吗
  • 如何将苹果手机复制
  • win7卸载系统软件
  • ubuntu20.04安装vnc
  • win8旗舰版官方下载
  • win7关闭uac是什么意思
  • win7开机每次都要输入用户名
  • windows8ip地址怎么设置
  • css怎么画
  • unity3d的
  • 点击android
  • android图片库
  • linux怎么使用shell脚本
  • js响应鼠标点击不了
  • js基本代码
  • jquery.js插件
  • 油票增值税专用发票几个点开
  • 各国海关关税起征点
  • 国家税务局申报系统操作步骤说明在哪里看
  • 河北电子税务局网上登录
  • 在水贝买的黄金
  • 副局长是由局长任命的吗
  • 云南4050人员2020最新政策
  • 福州水费出账时间
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设