css中设置br标签之后的样式_CSS学习
语法:
选择器,声明(由一个属性和一个值)
注释:/* */
选择器:
1. id选择器,class选择器
2. 组和选择
3. 属性选择
创建:
- 外部样式表
html <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
- 内部样式表
html <head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>
- 内联样式
html <p style="color:sienna;margin-left:20px">这是一个段落。</p>
多重样式优先级
(内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式
背景:
background-color
background-image
background-repeat
background-attachment
background-position
文本:
字体:
链接:
a:link
- 正常,未访问过的链接a:visited
- 用户已访问过的链接a:hover
- 当用户鼠标放在链接上时a:active
- 链接被点击的那一刻
列表:
盒子模型:
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。扩展内边距
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
边框属性:
边框轮廓:
margin(外边距):
padding(填充):
分组 和 嵌套 选择器:
/*分组*/
h1,h2,p
{color:green;
}
/*嵌套*/
p
{color:blue;text-align:center;
}
.marked
{background-color:red;
}
.marked p
{color:white;
}
p.marked{text-decoration:underline;
}
尺寸:
块级元素(block)特性:
- 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
- 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性:
- 和相邻的内联元素在同一行;
- 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,就是里面文字或图片的大小;
块级元素主要有:
- address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有:
- a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
可变元素(根据上下文关系确定该元素是块元素还是内联元素):
- applet ,button ,del ,iframe , ins ,map ,object , script
CSS中块级、内联元素的应用:
利用CSS我们可以摆脱上面表格里HTML标签归类的限制,自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个:
display:block
-- 显示为块级元素display:inline
-- 显示为内联元素display:inline-block
-- 显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性
我们常将<ul>
元素加上display:inline-block
样式,原本垂直的列表就可以水平显示了。
定位:
relative:定位是相对于自身位置定位(设置偏移量的时候,会相对于自身所在的位置偏移)。设置了 relative 的元素仍然处在文档流中,元素的宽高不变,设置偏移量也不会影响其他元素的位置。最外层容器设置为 relative 定位,在没有设置宽度的情况下,宽度是整个浏览器的宽度。
absolute:定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的,如果没有父元素设置绝对或相对定位,则元素相对于根元素即 html 元素定位。设置了 absolute 的元素脱了了文档流,元素在没有设置宽度的情况下,宽度由元素里面的内容决定。脱离后原来的位置相当于是空的,下面的元素会来占据位置。
css中设置br标签之后的样式_CSS学习相关推荐
- css链接样式_如何在CSS中设置链接样式
css链接样式 样式链接 (Styling Links) Links can be styled with any CSS property, such as color, font-family, ...
- css中设置微软雅黑时,在ie6css中有些样式会失效的解决办法
最近做专题页面时发现在css中设置{font-family:"微软雅黑";} 时,在ie6中会使一些样式失去作用,或者出现页面变形,尝试着用办双引号去掉或者把 字体设置成font- ...
- html怎么设置字体于字体的间隔,如何在css中设置字体间隔
如何在css中设置字体间隔 发布时间:2021-05-15 15:39:05 来源:亿速云 阅读:81 作者:Leah 如何在css中设置字体间隔?针对这个问题,这篇文章详细介绍了相对应的分析和解答, ...
- 为什么在css中设置了font-family: 微软雅黑没有用
首先可以用 { font-family: 微软雅黑: } 如果这样不行还可以用: { font-family: "Microsoft YaHei" ! important; } 使 ...
- css中设置了font-family: 微软雅黑没有用
首先可以用 {font-family: 微软雅黑: } 如果这样不行还可以用: {font-family: "Microsoft YaHei" ! important; } 使用中 ...
- php 字体倾斜,CSS中font-style定义字体倾斜体样式的代码示例
本篇文章给大家带来的内容是关于CSS中font-style定义字体倾斜体样式的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.常用斜体语法 常用字体样式设置font-st ...
- html img图片不平铺,如何在css中设置图片不平铺
如何在css中设置图片不平铺 发布时间:2021-04-29 15:39:28 来源:亿速云 阅读:80 作者:Leah 这篇文章将为大家详细讲解有关如何在css中设置图片不平铺,文章内容质量较高,因 ...
- css可以设置文本框颜色吗,如何在css中设置文本框颜色
如何在css中设置文本框颜色 发布时间:2021-04-29 15:33:54 来源:亿速云 阅读:72 作者:Leah 如何在css中设置文本框颜色?针对这个问题,这篇文章详细介绍了相对应的分析和解 ...
- 网页html怎么调整字样,怎么在css中设置两个字和三个字对齐
怎么在css中设置两个字和三个字对齐 发布时间:2021-03-09 15:16:12 来源:亿速云 阅读:85 作者:Leah 怎么在css中设置两个字和三个字对齐?针对这个问题,这篇文章详细介绍了 ...
最新文章
- Android游戏开发之OpenGL之视图-投影矩阵 杂谈
- python程序员需要掌握哪些技术-python运维要掌握哪些内容
- Vue 组件库 HeyUI@1.19.0 发布,新增 Icon 图标
- .Net Core中使用RabbitMQ
- 温州大学计算机网络,数据通信与计算机网络(温州大学)实验四 - 运输层TCP和UDP协议分析.doc...
- IntentService使用
- a的n次方的最后三位数c语言,求13的n次方(12n≤130000000000)的最后三位数,用c++编程...
- MVC5+EF6之EF CRUD
- 时间和日期的JS库Moment.js常见用法总结
- 聚合直播源码原生播放器php分享,原生聚合直播搭建源码
- 专题:手把手学习硬件基础之手册阅读------LDOAMS117
- 记2011 IOCCC Best one liner
- 软考中高级项目管理案例分析-人力资源管理
- 你可以把Linux内核当成一家软件外包公司的老板
- 常用的校验注解之 @NotNull、@NotBlank、@NotEmpty 的区别
- ERROR: [Synth 8-439] module ‘xxx‘ not found not found 错误解决办法
- PAUL VIOLA 鲁棒的实时人脸检测:Robust Real-Time Face Detection
- Dataset之IRIS:莺尾(Iris)数据集的简介、下载、使用方法之详细攻略
- 卸载 linux 命令行,如何在 Ubuntu 中使用命令行卸载 CrossOver
- 今年好像没有金三银四了?