位置: 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网站访问量大怎么优化)

  • iqoo游戏空间怎么添加到桌面(iqoo游戏空间怎么关闭)

    iqoo游戏空间怎么添加到桌面(iqoo游戏空间怎么关闭)

  • 微信群右上角圆圈的删除办法(微信群右上方有个圆圈)

    微信群右上角圆圈的删除办法(微信群右上方有个圆圈)

  • 苹果8p无线充电怎么用(苹果8p无线充电功能怎么打开)

    苹果8p无线充电怎么用(苹果8p无线充电功能怎么打开)

  • QQ设置无性别(qq怎样设置无性别)

    QQ设置无性别(qq怎样设置无性别)

  • 小天才电话手表内存满了怎么办(小天才电话手表app下载安装)

    小天才电话手表内存满了怎么办(小天才电话手表app下载安装)

  • gpt分区系统可做ghost备份吗(gpt分区操作)

    gpt分区系统可做ghost备份吗(gpt分区操作)

  • 微信临时登录多久退出(微信临时登录多久)

    微信临时登录多久退出(微信临时登录多久)

  • 智慧团建密码忘记而且找不到管理员怎么办(智慧团建密码忘了,但是又找不到管理员)

    智慧团建密码忘记而且找不到管理员怎么办(智慧团建密码忘了,但是又找不到管理员)

  • 华为nova5跟p30对比(华为nova5与p30)

    华为nova5跟p30对比(华为nova5与p30)

  • 海韵电源是哪个国家的(海韵电源哪个好)

    海韵电源是哪个国家的(海韵电源哪个好)

  • 微信辅助扫码安全吗(微信 扫码 辅助)

    微信辅助扫码安全吗(微信 扫码 辅助)

  • 输入对方手机号能找到对方的位置吗(输入对方手机号就能跟踪)

    输入对方手机号能找到对方的位置吗(输入对方手机号就能跟踪)

  • ios13占用多少内存(ios13.3占用多少内存)

    ios13占用多少内存(ios13.3占用多少内存)

  • gtx850是独立显卡吗

    gtx850是独立显卡吗

  • vivo手机能用电信卡吗(vivo手机能用电信卡吗怎么设置)

    vivo手机能用电信卡吗(vivo手机能用电信卡吗怎么设置)

  • oppo怎么使用悬浮键盘(oppo手机怎么开悬浮按钮)

    oppo怎么使用悬浮键盘(oppo手机怎么开悬浮按钮)

  • 苹果11的充电器和以往的不一样吗(苹果11的充电器14pro能用吗)

    苹果11的充电器和以往的不一样吗(苹果11的充电器14pro能用吗)

  • 如何锁定ppt不被修改(如何锁定ppt不被别人改动)

    如何锁定ppt不被修改(如何锁定ppt不被别人改动)

  • 三层交换机的作用(三层交换机作用及原理)

    三层交换机的作用(三层交换机作用及原理)

  • 微博搜索昵称没反应(微博搜索昵称找不到自己)

    微博搜索昵称没反应(微博搜索昵称找不到自己)

  • 爱奇艺弹幕开关在哪(爱奇艺弹幕开关突然没有了)

    爱奇艺弹幕开关在哪(爱奇艺弹幕开关突然没有了)

  • 清晰度3mp和1080p区别(清晰度3mp和2k的区别)

    清晰度3mp和1080p区别(清晰度3mp和2k的区别)

  • Bios密码忘记了怎么办 主板CMOS设置的Bios密码清除方法(联想笔记本bios密码忘记了)

    Bios密码忘记了怎么办 主板CMOS设置的Bios密码清除方法(联想笔记本bios密码忘记了)

  • Uncaught TypeError: XXX is not a function问题解决方法

    Uncaught TypeError: XXX is not a function问题解决方法

  • 小企业汇算清缴要审计报告吗
  • 耕地占用税的特点与意义
  • 建筑劳务如何开三个点的发票
  • 核定征收可以不开免税普票吗
  • 其他资本公积可以是负数吗
  • 持有待售流动资产如果说以历史成本计量的时候怎么弄
  • 甲公司自2018年3月1日开始自行研发一款新兴产品
  • 小企业准则固定资产折旧每月折旧多折了
  • 结算业务申请书和转账支票区别
  • 长期借款会计科目编码
  • 违约金收入需要缴纳印花税吗
  • 子公司之间可以相互交易吗
  • 保险公司返点啥意思
  • 期初余额什么时候在借方什么时候在贷方
  • 第三方代缴社保能查到原单位吗
  • 注册资本金应该编入政府性基金预算吗
  • 政府制定优惠政策
  • 公司汽车车险抵税多少
  • 中标服务费会计科目
  • 尚未开发的土地使用权摊销
  • 工程发票需要进项吗
  • 建筑业跨区预缴增值税未预缴
  • 扣缴上月税费会计分录
  • 财务会计怎么学好
  • 安置房视同销售需要缴纳所得税吗?
  • 汽车修理费抵扣怎么做账
  • 微软输入法突然变成繁体字怎么改回来
  • 穿越火线刷枪视频教程
  • 电脑如何修改硬盘模式
  • 咨询公司流程完整
  • php curl_multi_init
  • 怎样做好固定资产管理工作
  • 职工福利费会计账务处理
  • mac快捷键是什么意思
  • PHP:imagesetinterpolation()的用法_GD库图像处理函数
  • 违约金要计入应纳税所得额吗
  • 计提税金及附加怎么算
  • 一般贸易和进料加工贸易的区别
  • 税务机关为小规模纳税人
  • 怎么用html做一个收藏夹
  • 新企业所得税税前扣除政策
  • 个人往来款如何转为公司股权
  • 小满秒懂百科
  • 小规模单位没交五险一金
  • pwd命令的用法
  • 什么是政府项目档案
  • 增值税发票没认证可以退回吗
  • 合伙企业退伙如何缴纳个人所得税
  • python创建ndarray
  • 年终奖怎么计算个税
  • 出租车票可以查到行程吗
  • 运费和什么有关
  • 吸收合并需要编制
  • 坏账准备计提方法一经确定不得随意变更这种做法体现了
  • 差旅费会计科目怎么做
  • 职工教育经费超过扣除限额的时候调增还是调减
  • 存货报废如何做账
  • 发票金额太大怎么办
  • 出租不动产如何缴纳增值税
  • 民间非营利组织会计制度最新版
  • 对公账户没有用了一定要注销吗?
  • 账务核对包括账表核对吗
  • 暂估固定资产的账务处理
  • mysql中的ifnull函数
  • 数据库中alter table的用法
  • mysql怎么直接向表中写数据
  • centos7怎么关闭端口
  • 如何激活windows2008server
  • win7系统在电源选项找不到屏幕亮度
  • u深度如何装win7系统
  • python 变参
  • javascript基于什么的语言
  • javascript html5实现表单验证
  • 安卓系统引导程序
  • 原生js
  • 座机怎么查来电显示号码
  • 混合销售定义是什么意思
  • 内蒙古一般纳税人查询网
  • 三种人不交个人所得税?
  • 佩兰诗胶原蛋白填充霜真的有效果吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设