`
huangyongxing310
  • 浏览: 496124 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

CSS

    博客分类:
  • CSS
CSS 
阅读更多
CSS

CSS 简介
CSS 指层叠样式表 (Cascading Style Sheets)


CSS 语法
selector {declaration1; declaration2; ... declarationN }

h1 {color:red; font-size:14px;}


以分号结束
CSS 对大小写不敏感。不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。



CSS 属性选择器
[title~=hello] { color:red; }


[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。



CSS 框模型


元素框的最内部分是实际的内容
直接包围内容的是内边距
内边距呈现了元素的背景
内边距的边缘是边框
边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。

在 CSS 中,width 和 height 指的是内容区域的宽度和高度。
增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。



CSS 浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。



行框和清理
行框就是以块级标签定义的元素,内容可以是一个多行显示的内容

块级标签定义的元素在文档流中是独占一行的,就是说如果内容不足以占完一行(一块),后面的内容也不会占用剩下的空间

行内块级元素是会占用剩余空间进行内容显示的

浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。



伪类和伪元素的区别
CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于将特殊的效果添加到某些选择器。

伪类种类


伪元素种类


伪类就是一个你能通过为一个元素加入一个类就可以解决的
如:
:first-child
<p>
    <i class="first-child">first</i>
    <i>second</i>
</p>


伪元素就是你要通过定义一个元素的方式才可以进行完成的(增加一个类是不能够完成的)
如:
:first-letter
<p><span class='first-letter'>I</span> am stephen lee.</p>



行高
置行间的距离

属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。



外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,
你就可以通过更改一个文件来改变整个站点的外观。

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




内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过
<style> 标签定义内部样式表。

<head>
	<style type="text/css">
	body {background-color: red}
	p {margin-left: 20px}
	</style>
</head>




内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。

<p style="color: red; margin-left: 20px">
	This is a paragraph
</p>




样式的优先级
(外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style

  • 大小: 7.8 KB
  • 大小: 29.6 KB
  • 大小: 16.5 KB
分享到:
评论

相关推荐

    css3.0参考手册 css3.0参考手册

    css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...

    Reset_CSS css样式重置文件

    CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的...

    div+css布局大全

    9. **性能优化**:合理的div+css布局也应考虑性能,如减少CSS选择器的复杂性、优化图片和字体资源、使用适当的布局方法等,以提升页面加载速度和用户交互体验。 10. **浏览器兼容性**:尽管现代浏览器对CSS的支持...

    CSS中常用的 reset.css文件

    因此,在使用`reset.css`时,最好结合`normalize.css`或现代的CSS重置方法,如`Eric Meyer Reset`或`sanitize.css`,它们不仅重置样式,还会保留一些有助于无障碍浏览和语义化的默认样式。 在实际项目中,可以将`...

    birt公用CSS样式

    在创建BIRT报表时,CSS(Cascading Style Sheets)样式起到了至关重要的作用,它们用于控制报表的外观和布局,使其符合用户界面的需求。本主题将深入探讨“birt公用CSS样式”,并结合提供的文件内容进行详细说明。 ...

    HTML+CSS网页设计与布局从入门到精通

    《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术,全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》...

    前端开源库-postcss-css-variables

    在前端开发领域,CSS Variables(也称为CSS自定义属性)是一种强大的工具,它允许开发者在整个样式表中定义和重用变量。PostCSS 是一个JavaScript工具,它可以解析CSS,执行一些任务,然后输出新的CSS。Postcss-css-...

    div+css手册

    《div+css手册》是一本深入探讨网页布局技术的重要参考资料,尤其对于网页设计者和前端开发者来说,它具有极高的学习价值。这个手册的核心聚焦在HTML中的`div`元素和CSS(层叠样式表)的结合使用上,旨在帮助读者...

    pycharm中显示CSS提示的知识点总结

    我们用pycharm写CSS的时候,是不是苦于没有提示,那么pycharm中如何显示CSS提示呢?下面小编给大家分享一下。 首先点击左上角的file菜单,选择Setting 接着选择Editor下面的Inspections选项,如下图所示 然后在...

    CSS:The Definitive Guide, 4th Edition[CSS权威指南](英文版)

    《CSS权威指南》第四版是CSS领域的重要著作,作者Eric A. Meyer凭借其深厚的行业经验和智慧,对CSS的各个方面进行了详尽的探讨。 本书从基础讲起,逐步深入到CSS的核心概念与应用。CSS权威指南第四版涵盖了CSS的...

    网页设计期末大作业+html+css

    9个网页布局,学校让做的网站作业,虽然是比较基础的网页静态页面,不过我也希望你能做的规范一些,我们专业制作学生网页作业,div css js 等通过dreamwear的工具实现规范化,比如文件夹的规范,代码写作的规范,...

    HTML外部引用CSS文件不生效原因分析及解决办法

    就比如我在css目录下面写了一个css样式文档:style.css。这时里面只有一句话: XML/HTML Code复制内容到剪贴板 body {  background-color: #ddd;  }  然后再我的html文件里面去引入这个外部css: XML/...

    CSS新世界1

    【CSS新世界1】这本书是关于CSS3的深入探索,主要介绍了CSS3的模块化发展以及新特性。书中首先回顾了CSS3出现的历史背景,强调了模块化带来的灵活性和扩展性,让读者对CSS3有一个整体的认识。接着,作者详细讲解了...

    CSS酷站CSS特效华丽CSS

    在本篇内容中,我们将深入探讨"CSS酷站"、"CSS特效"和"华丽CSS"相关的知识点,以及通过一些CSS精美示例来展示其魅力。 首先,"CSS酷站"是指那些运用创新和独特CSS技巧设计的网站,它们通常具有引人入胜的视觉效果和...

    Qt css样式大全+详细书签pdf.zip

    而Qt中的CSS(Cascading Style Sheets)样式则允许开发者通过类似网页CSS的方式定制Qt界面的外观和布局。本资源"Qt css样式大全+详细书签pdf.zip"包含了丰富的Qt CSS样式的教程和参考资料,旨在帮助开发者深入理解和...

    将AE制作的动画导出为CSS代码

    "将AE制作的动画导出为CSS代码"这一主题探讨的是如何将AE中的动画转换成可应用于网页的CSS代码,以便在网页上实现类似的动态效果。 AE提供了一种方式,通过插件或自定义脚本来将动画的关键帧数据转化为CSS3关键帧...

    DIV+CSS漂亮的样式

    本资源包“漂亮样式CSS”包含了几个精心设计的`DIV+CSS`样式示例,特别是3D按钮和层模拟窗口移动的效果,这些都是现代网页设计中非常流行和实用的元素。 首先,3D按钮是提升网页界面视觉吸引力的重要元素。在CSS3的...

Global site tag (gtag.js) - Google Analytics