html标签元素中定义样式表的属性名是,HTML标签属性与CSS样式
定义:超文本标记语言
Hypetext Markup Language
特点:
不需要编译,直接由浏览器执行
是一个文本文件
必须用htm或html作文件后缀
对大小写不敏感,HTML或html都可以
声明不是标签
html标签的属性
语法:自己的文本标签名>
CSS定义:Cascading Style Sheets 层叠样式表
CSS的作用:
结构和样式 – css分离的方式,便于后期的维护和改版
可以用多套样式,使得网页有任意样式切换的效果
使得页面载入更快,降低服务器的成本
行内样式外部样式内部样式
在标签内部添加css样式
单独把样式写到CSS文件中,在html文件中引入CSS文件
外部样式就是新建一个文档,里面全写css,然后通过link 插入到html代码中
作用:使得网页的表示层和结构层能够进行彻底分离
link 用于定义文档和外部资源的关系
rel=”stylesheet” relationship关系
type=”text/css” 定义css样式文件的类型
href=”index.css” 引用的具体文件
内部样式写在html结构内部,写于head标签中
CSS选择器就是用来找到需要添加样式的标签或位置
常用的选择器有:
标签选择器: 此为内部样式、标签选择器修改文本样式的方式
-类选择器:标签内部加入class="",class的属性值必须为字母数字,且首位必须为字母, class的属性在style标签中前面须加符号"."
id选择器:id的写法与class一致,但id的属性是唯一的,且在style标签
CSS中标签样式的属性
背景样式 background
1.background-color: 颜色值 颜色作为背景颜色
2.background-image: 图片位置 图片作为背景图片
3.background-repeat: repeat repeat-x repeat-y no-repeat 背景图片的重复方向
4.background-attachment: 背景是否随着滚动条滚动
1.Fixed 文字滚动,背景图片不随着滚动
2.scroll 背景图片随着文字一起滚动
5.background-position: 背景图像的起始位置
1.top left ,top center ,top right ,center left,center center,center right,bottom left,bottom center,bottom right
如果只定义了一个值,那么第二个值将是center 默认值 0% 0%
2.x% y% 第一个值是水平 第二个值是垂直
左上角:0% 0% 右下角:100% 100%如果规定了一个值另一个值就是50%
background 背景样式的值是复合了属性值的组合,在实际应用中,可在background后按顺序依次写入五个属性值
Div的样式设置
div大小、背景设置
div溢出效果展示,换行、滚动条显示
div边框、轮廓设置
盒子模型
超出div宽度和高度的文字或者图片进行隐藏处理
超出div宽度和高度的文字或者图片增加滚动条
overflow属性设置:
visible: 默认溢出
hidden: 隐藏溢出内容
scoll: 加滚动条
auto: 按需显示滚动条
Div的轮廓包含轮廓和边框两部分
CSS轮廓:outline属性
作用:绘制于元素周围的一条线,位于边框外缘的外围,可起到突出元素的作用
dashed :虚线框
dotted:点状
soild:实线
double:双线
none:无线
CSS边框:border属性
作用:设置div边框的边线宽度,颜色,虚线,实线等样式css属性
边框可设置的边:border-left border-right border-top border-bottom
dashed:虚线框
dotted:点状
soild:实线
double:双线
none:无线
盒子模型用来改变间距,一般用于块级标签
盒子属性:
width: 宽度
height: 高度
border: 边框
margin: 外边距 盒子与盒子之间的距离
padding: 内边距 内容与边框之间的距离
margin与padding的属性:
margin/padding:0px 0px 0px 0px;
内外边距的方向: 上 右 下 左
注:
1.当margin/padding: 0px 0px;时
则第一个值代表上下边距,第二个值代表左右边距;
2.当margin/padding: 0px 0px 0px;时
则第一个值代表上边距,第二个值代表左右边距,第三个值代表下边距;
3.当margin/padding:0px;时
则代表所有边距为同一个数值
box-sizing的padding部分多出的产生:
content-box:宽高之外的元素的内边距和边框,默认益处的效果
border-box:已设定的宽高减去内边距得到的内容的宽高
定位机制
(标准)文档流,脱标流(脱离标准文档流 – float、position:absolute)
文档流:
1、空白折叠现象 (行级标签写在同一行)
2、高矮不齐,底边对齐
3、自动换行,一行写满,换行写
left: 向左浮动
right: 向右浮动
none: 不浮动
崩塌效果:
当父级盒子没有设置宽高范围时,父级盒子的范围将会随着子级范围而被撑开
当父级盒子设置宽高范围时,会对子级范围进行约束
当子级元素全部设置浮动,而父级没有宽高范围时,父级崩塌
clear:both/left/right
html标签元素中定义样式表的属性名是,HTML标签属性与CSS样式相关推荐
- 把css样式表与html网页关联的方法,Dreamweaver 教程-CSS样式表的3种关联方法
下面我们来讲讲如何为一个网页添加CSS样式. 内部样式表 内部样式表需要在网页的 部分定义,格式如下: 行内样式表(内嵌样式表) 它的使用方法我们在前两节也已经使用过了.行内样式表直接在标签内部定义, ...
- 【关于js数组对象一道题】将数组对象中的英文属性名替换为中文属性名
将数组对象中的英文属性名替换为中文属性名 const arr = [{name: '张三', age: 18, address: '湖北'}, {name: '李四', age: 18, addres ...
- 下面html标签元素中不属于块元素的是,HTML中为何P标签内不可包含块元素?
起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异.于是究其原因,发现块级元素P内是不能嵌套DIV的. 深究:我们先来认识in-line内联元素和blo ...
- 关于在页面中针对不同版本的IE浏览器实现不同的JS或者CSS样式
一般会用到<!--[if IE]>这里是正常的html代码<![endif]--> 条件注释只能在windows Internet Explorer(以下简称IE)下使用,因此 ...
- 【Qt】Qt样式表总结(三):QObject 属性
[Qt]Qt样式表总结(一):选择器 [Qt]Qt样式表总结(二):冲突和命名空间 QObject 属性 可以使用 qproperty < 属性名称 > 语法,设置任何可以Q_PROPER ...
- jquery html()样式悠效,jquery怎么用attr()方法判断改变css样式?
jquery怎么用attr()方法判断改变css样式?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. jquery中用attr()方法用于设置或返回被选元 ...
- js遍历追加html子样式,前端基本功:JS(十一)动画封装(CSS样式获取、JSON遍历)...
动画原理 动画基本原理.gif 人走路的时候, 步长 动画的基本原理 : 让盒子的 offsetLeft + 步长 盒子 原来的位置 0 + 10 盒子现在的offsetLeft 10 动画基本原理的 ...
- Java中怎样使用反射根据属性名获取和设置属性的值
场景 在某管理系统中需要对一月中的每天进行设置某个状态 对应的实体类的属性为 分别为d1 d2 一直到第31号.前端传递到后台的是d1 d2 d3等实体类对应的属性和要设置的状态的字段. 怎样将这些属 ...
- ajax使用html()后样式无效,jquery.ajax使用字符串拼接后内联css样式失效
问题所在: 是这样的,我使用ajax调用了一串json数据,使用字符串拼接的方法动态插入div容器.结果css并没有对动态插入的内容加css样式. 代码描述: css使用的内联,在head部分, jq ...
最新文章
- UIModalPresentationStyle 各种类型的区别
- Codeigniter CRUD代码快速构建
- 【ES9(2018)】RegExp扩展
- 【python】面向对象类的继承
- Thinking in Java 14.7 动态代理
- was进程内存占用过大_Linux服务器Cache占用过多内存导致系统内存不足问题的排查解决...
- 88个塑胶模具设计中常用的知识点
- Win10如何开启IIS服务以及如何打开IIS管理器
- 图像有损压缩与无损压缩_有损压缩与无损压缩之间的区别
- 实验3:利用SVM实现线性高斯分类
- 吴恩达机器学习python实现8 异常检测及推荐系统
- java中int型的取值范围_Java中int的取值范围
- 某知乎x-zse-96参数解析2022/08/09首发
- JSON快速学习入门
- 多光谱行人检测(一)Multispectral Pedestrian Detection:Benchmark Dataset and Baseline
- 【河海大学863】22年考研真题及解析
- 基于阿米巴经营模式的电商平台研发
- 详解Cookie、Session和缓存的关系(转)
- M3033 内置PD2.0/QC2.0快充协议2-7串多节升降压锂电充电管理IC方案
- 鸿蒙OS2翻车?华为MateX2和pokertime129263实测,结果让人无法接受
热门文章
- SwiftUI基础之设置TextField的placeholder文本颜色(text color)
- 算法-约瑟夫环问题(丢手绢问题)
- 手机里的便签的内容怎么迁移到另一个手机里的便签里
- Ubuntu下Python程序font = ImageFont.truetype(‘arial.ttf‘, 24)报错OSError: cannot open resource
- 电商收付通整合小程序文档整理
- 发布油耗统计小工具V1.32,非常感谢大家对我的支持
- linux clock头文件,Linux common clock framework(1)_概述
- 邮件服务器从0到100
- 模块xxxx.dll已加载,但对DllRegisterServer的调用失败,错误代码为 XXXXXXXXX
- 在Java中获取Android端登陆的设备信息