前端--CSS

番茄西红柿发布于2019-04-23 13:25 / 1532人阅读

摘要：一介绍是的简称中文称为层叠样式表用来控制网页数据的表现可以使网页的表现与数据内容分离，层叠样式表定义如何显示元素。用于控制内容与边框之间的距离边框围绕在内边距和内容外的边框。内容盒子的内容，显示文本和图像。

一.CSS介绍

CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离.

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）

二.CSS的四种引入方式

1.行内式

　　行内式是在标记的style属性中设定css样式,这种方法没有体现css的优势,不推荐使用.

2.嵌入式

　　嵌入式是将css样式集中写在网页的标签对的标签对中.格式如下:

3.导入式

　　将一个独立的.css文件引入HTML文件中,导入式使用css规则引入外部css文件,　　

　　注意:

　　　　导入式会将在整个网页装载完后再装载css文件,因此这就导致了一个问题,如果网页比较大则会出现先显示无样式的网页,闪烁一下,再出现网页样式

4.链接式

　　也是将一个.css文件引入HTML文件中　　

三.CSS选择器(selector)

　　"选择器" 指明了{}中的"样式"的作用对象,也就是"样式"作用于网页中的哪儿些元素

1.基础选择器

　　*　　:　　　　通用元素选择器,匹配任何元素*{margin:0;padding:0}

　　E　　:　　　　标签选择器,匹配所有使用E标签的元素p{color:green}

　.info和E.info:　　class选择器(类选择器),匹配所有类属性中包含info的元素.info{background:#ff0;}p.info{background:blue;}

　#info和E#info:　　id选择器#info{background:#ff0;}p#info{background:#ff0;}

2.组合选择器

　　E,F　　　多元素选择器,同时匹配所有的E元素或者F元素,E和F之间用逗号分隔　Div,p{color:#f00;}

　　E F　　　后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔　#nav li {display;inline;} li a {font-weight:bold;}

　　E>F　　　子元素选择器,匹配所有E元素的子元素F　div > strong{color:#f00;}

　　E + F　　毗邻元素选择器,匹配所有紧挨着E元素之后的同级元素F　p + p {color:#f00;}

　　#l1~p　　弟弟选择器,匹配l1后面所有的兄弟p标签

#嵌套规则:

　　块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其他内联元素.

　　块级元素不能放在p里面,

　　有几个特殊的块级元素只能包含内联元素,不能包含块级元素.如h1-6,p,dt

　　li内可以包含div

　　块级元素与块级元素并列,内联元素与内联元素并列.错误栗子(

)

3.属性选择器

/*用于选取带有指定属性的元素。*/
p[title] {
  color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
  color: green;
}
/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
  color: red;
}

/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
  color: red;
}

/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
  color: green;
}

4.伪类选择器

　　伪类选择器:专用于控制链接的显示效果,伪类选择器;

　　　　a:link (没有点击过得链接),用于定义链接的常规状态

　　　　a:hover(鼠标放在链接上的状态),用于产生视觉效果.

　　　　a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接.

　　　　a:active(在链接上按下鼠标时的状态),用于表现鼠标按下去的链接状态.

5.选择器优先级

四.CSS的常用属性

1.颜色属性:

pppp

2.字体属性:

　　font-size:20px/50%/larger(大的)

　　font-family:Lucida Bright

　　font-weight:lighter/bold/border/

老男孩

3.背景属性:

　　background-color:cornflowerblue

　　background-image:url("1.jpg");

　　background-repeat;(repeat:平铺满)

　　background-position:right top (20px 20px);(横向: left center right)(纵向: top center bottom)

注意:如果讲背景属性加在body上,要记得给body加上一个height,否则结果异常,这是因为body为空,无法撑起背景图片

4.文本属性:

　　font-size: 10px;

　　text-align:center;横向排列

　　line-height:200px;文本行高通俗的讲,文本高度加上文字上下的空白区域的高度50%,基于字体大小的百分比

　　text-indent:150px;首行缩进,50%:基于父元素(weight)的百分比

　　letter-spacing:10px;

　　word-spacing:20px;

　　direction:rtl;

　　text-transform:capitalize;

5.边框属性:

　　border-style:solid;

　　border-color:chartreuse;

　　border-width:20px

6.列表属性

　　ul,ol{list-style:decimal-leading-zero;

　　　　list-style:none;list-style:circle;

　　　　list-style:upper-alpha;

　　　　list-style:disc;}

7.display属性

　　none

　　block

　　inlink

8.盒子模型:

　　margin: 用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
　　padding: 用于控制内容与边框之间的距离；
　　Border(边框): 围绕在内边距和内容外的边框。
　　Content(内容): 盒子的内容，显示文本和图像。

看图吧：

9.float:

　　在CSS中,任何元素都可以浮动.

　　浮动元素会生成一个块级框,二不论它本身是何种元素

　　关于佛洞的两个特点:

浮动的框可以向左或者向右,知道它的外边缘碰到包含框或另一个浮动的边框为止.
由于浮动框的不在文档的普通流当中,所以文档的普通流中的边框变现的就像浮动框不存在一样

　　三种取值:

　　　　left:向左浮动

　　　　right:向右浮动　

　　　　none:默认值,不浮动

　　　　参考

10.position:

　　1.static,默认值static:无特殊定位,对象遵循正常文档流.

　　　　top,right,bottom,left等属性不会被应用.说到这里我们不得不提一下一个定义------文档流,文档流其实就是文档的输出顺序,也就是我们通常看到的由左,到右,由上到下的输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个属性可以将元素从文档流脱离出来显示.默认值就是让元素继续按照文档流显示,不作出任何改变.

　　2.position:relative

　　relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性进行绝对定位.而基层叠通过z-index属性定义.

　　absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位.,而其层叠通过z-index属性定义.如果设定position:relative,就可以使用top,bottom,left和right来相对于元素在文档中应该出现的位置来移动这个元素.(意思是元素实际上依然占据文档中的原有位置,只是视觉上相对于它在文档中的原有位置移动了)当指定position:absoult时,元素就脱离了文档(即在这个文档中已经不占据位置了),可以准确的按照设置top,bottom,left和right来定位了.如果一个元素绝对定位后,其他参照物是以离自身最近元素是否设置了相对定位,如果有设置将以离自己最近元素定位,如果有设置将以离自己最近元素定位,如果没有将往其祖先元素寻找相对定位元素,一直找到html位置.

　　3.positson:fixed

　　　　在理论上,被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标,不论窗口是否滚动,它都会固定在这个位置.

　　fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动条滚动.而其层叠通过z-index属性定义.

　　注意:一个元素如果设置了position:absoulute | fixed;则该元素就不能设置float.,因为这是两个不同的流,一个是浮动流,另一个是"定位流".但是relative却可以.因为它原本所占的空间仍然占据文档流.

私有云超融合服务器前端css css前端前端css框架浮动-前端-css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1851.html

css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0
css相关 - 收藏集 - 掘金

摘要：在正式前端一些小细节前端掘金英文原文，翻译未来的太让人兴奋了一方面，是全新的页面布局方式另一方面，是酷炫的滤镜颜色等视觉效果。老司机教你更好的进行编程个技巧前端掘金并不总是容易处理。 CSS3 实现文字流光渐变动画 - 前端 - 掘金来自百度前端技术学院的实践任务：有趣的鼠标悬浮模糊效果，参考：http://ife.baidu.com/course/d...，用CSS3实现了一下，顺便...

molyzzx 2019-08-29 12:38 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

mikasa 2019-08-01 18:18 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

李世赞 2019-08-29 14:08 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

MudOnTire 2019-08-21 18:25 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

zxhaaa 2019-08-22 16:11 评论0 收藏0