语法:

选择器,声明(由一个属性和一个值)

注释:/* */

选择器:

1. id选择器,class选择器

2. 组和选择

3. 属性选择

创建:

  1. 外部样式表

html <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

  1. 内部样式表

html <head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>

  1. 内联样式

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学习相关推荐

  1. css链接样式_如何在CSS中设置链接样式

    css链接样式 样式链接 (Styling Links) Links can be styled with any CSS property, such as color, font-family, ...

  2. css中设置微软雅黑时,在ie6css中有些样式会失效的解决办法

    最近做专题页面时发现在css中设置{font-family:"微软雅黑";} 时,在ie6中会使一些样式失去作用,或者出现页面变形,尝试着用办双引号去掉或者把 字体设置成font- ...

  3. html怎么设置字体于字体的间隔,如何在css中设置字体间隔

    如何在css中设置字体间隔 发布时间:2021-05-15 15:39:05 来源:亿速云 阅读:81 作者:Leah 如何在css中设置字体间隔?针对这个问题,这篇文章详细介绍了相对应的分析和解答, ...

  4. 为什么在css中设置了font-family: 微软雅黑没有用

    首先可以用 { font-family: 微软雅黑: } 如果这样不行还可以用: { font-family: "Microsoft YaHei" ! important; } 使 ...

  5. css中设置了font-family: 微软雅黑没有用

    首先可以用 {font-family: 微软雅黑: } 如果这样不行还可以用: {font-family: "Microsoft YaHei" ! important; } 使用中 ...

  6. php 字体倾斜,CSS中font-style定义字体倾斜体样式的代码示例

    本篇文章给大家带来的内容是关于CSS中font-style定义字体倾斜体样式的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.常用斜体语法 常用字体样式设置font-st ...

  7. html img图片不平铺,如何在css中设置图片不平铺

    如何在css中设置图片不平铺 发布时间:2021-04-29 15:39:28 来源:亿速云 阅读:80 作者:Leah 这篇文章将为大家详细讲解有关如何在css中设置图片不平铺,文章内容质量较高,因 ...

  8. css可以设置文本框颜色吗,如何在css中设置文本框颜色

    如何在css中设置文本框颜色 发布时间:2021-04-29 15:33:54 来源:亿速云 阅读:72 作者:Leah 如何在css中设置文本框颜色?针对这个问题,这篇文章详细介绍了相对应的分析和解 ...

  9. 网页html怎么调整字样,怎么在css中设置两个字和三个字对齐

    怎么在css中设置两个字和三个字对齐 发布时间:2021-03-09 15:16:12 来源:亿速云 阅读:85 作者:Leah 怎么在css中设置两个字和三个字对齐?针对这个问题,这篇文章详细介绍了 ...

最新文章

  1. Android游戏开发之OpenGL之视图-投影矩阵 杂谈
  2. python程序员需要掌握哪些技术-python运维要掌握哪些内容
  3. Vue 组件库 HeyUI@1.19.0 发布,新增 Icon 图标
  4. .Net Core中使用RabbitMQ
  5. 温州大学计算机网络,数据通信与计算机网络(温州大学)实验四 - 运输层TCP和UDP协议分析.doc...
  6. IntentService使用
  7. a的n次方的最后三位数c语言,求13的n次方(12n≤130000000000)的最后三位数,用c++编程...
  8. MVC5+EF6之EF CRUD
  9. 时间和日期的JS库Moment.js常见用法总结
  10. 聚合直播源码原生播放器php分享,原生聚合直播搭建源码
  11. 专题:手把手学习硬件基础之手册阅读------LDOAMS117
  12. 记2011 IOCCC Best one liner
  13. 软考中高级项目管理案例分析-人力资源管理
  14. 你可以把Linux内核当成一家软件外包公司的老板
  15. 常用的校验注解之 @NotNull、@NotBlank、@NotEmpty 的区别
  16. ERROR: [Synth 8-439] module ‘xxx‘ not found not found 错误解决办法
  17. PAUL VIOLA 鲁棒的实时人脸检测:Robust Real-Time Face Detection
  18. Dataset之IRIS:莺尾(Iris)数据集的简介、下载、使用方法之详细攻略
  19. 卸载 linux 命令行,如何在 Ubuntu 中使用命令行卸载 CrossOver
  20. 今年好像没有金三银四了?

热门文章

  1. 线程池实现填充短信_填充一个池需要多少个线程?
  2. Spring项目的按层打包已过时
  3. apache jmeter_Apache Server和JMeter调试
  4. 从微服务到分布式系统-Java开发人员生存指南
  5. Neo4j:找到两个纬度/经度之间的中点
  6. Java Web App体系结构
  7. PrimeFaces:在动态生成的对话框中打开外部页面
  8. 用jOOQ用Java编写SQL
  9. JPA 2.1类型转换器–保留枚举的更好方法
  10. 正则表达式中关于字符集的问题