欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > CSS >内容正文

CSS

css中设置br标签之后的样式_CSS学习

发布时间：2023/12/2 CSS 84 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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学习的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。