css第一个元素 | 易学教程

CSS Grid 布局

阅读更多关于 CSS Grid 布局

CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。通过将 CSS 规则应用于父元素 (成为 Grid Container 网格容器)和其子元素（成为 Grid Items 网格项），你就可以轻松使用 Grid(网格) 布局。简介 CSS Grid(网格) 布局（又称为 “Grid(网格)” ），是一个二维的基于网格的布局系统它的目标是完全改变我们基于网格的用户界面的布局方式。CSS 一直用来布局我们的网页，但一直以来都存在这样或那样的问题。一开始我们用表格（table），然后是浮动（float），再是定位（postion）和内嵌块（inline-block），但是所有这些方法本质上都是只是 hack 而已，并且遗漏了很多重要的功能（例如垂直居中）。Flexbox 的出现很大程度上改善了我们的布局方式，但它的目的是为了解决更简单的一维布局，而不是复杂的二维布局（实际上 Flexbox 和 Grid 能结合在一起工作，而且配合得非常好）。Grid(网格) 布局是第一个专门为解决布局问题而创建的 CSS 模块，我们终于不需要想尽办法hack 页面布局样式了。基础知识和浏览器支持首先，你必须使用 display: grid 将容器元素定义为一个 grid(网格)

css的position属性

阅读更多关于 css的position属性

Html css position属性 position属性把元素放置在一个静态的,相对的,绝对的,或则固定的位置中. 1,第一个属性absolute,绝对定位生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位</title> </head> <style> /*绝对定位*/ div.pos_abs{ position:absolute; left:100px; top:150px; width:200px; height:200px; background-color:black; color:white; text-align:center; } div{ border:2px solid black; } </style> <body> <div class="pos_abs"> 这是一个绝对定位的盒子 </div> <div> 通过绝对定位,元素可以放置在页面上的任何位置,下面的黑色盒子距离页面左侧100px,距离页面顶部150px. </div> </body> </html> 我们

【CSS】聊一聊css的选择器

阅读更多关于【CSS】聊一聊css的选择器

对于css来说，他的基本语法就是选择器 { K:V; K:V; K:V } 所以css的学习就分为两个部分： * 1 选择器选中元素(标签) * 2 各种属性其中选择器尤为重要，因为如果无法确定样式具体作用的标签，那么设置样式也就无从谈起。所以今天我们一起来聊一聊css中的选择器。一基本选择器首先我们需要掌握几种基本选择器，如果能熟练掌握基本选择器，实际上就可以开发出大部分的页面样式。 1.1 标签选择器最基本的选择器就是标签选择器，标签选择器就是直接使用div，p这种标签名，这种设定会影响到页面中所有的该标签。 2css.html （head部分） <style> /* 所有p标签都起作用*/ p { color: orange; } </style> 2css.html （body部分） 1 <p>第一段</p> 2 <div> 3 <div> 4 <div> 5 <div> 6 <p>我隐藏的比较深</p> 7 </div> 8 </div> 9 </div> 10 </div> 实现效果：两个p标签都改变了样式，字体颜色变成了橘黄色。 1.2 类选择器如果我们只希望更改第一个p标签的样式，而不更改第二个p标签，这时候就可以选择类选择器，具体实现方法就是给标签添加class属性，要注意可以给不同的标签赋予同样的类名，因为物以类聚，人以群分

前端CSS

阅读更多关于前端CSS

前端CSS CSS介绍 CSS（ C ascading S tyle S heet，层叠样式表)定义如何显示 HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 CSS语法 CSS实例每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 CSS注释 /*这是注释*/ 注释是代码之母。 CSS的几种引入方式行内样式行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。 <p style="color: red">Hello world.</p> 内部样式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：按 Ctrl+C 复制代码按 Ctrl+C 复制代码外部样式外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 <link href="mystyle.css" rel="stylesheet" type="text/css"/> CSS选择器基本选择器元素选择器 p {color: "red";} ID选择器 #i1 { background-color: red; } 类选择器按 Ctrl+C 复制代码按 Ctrl+C 复制代码注意：样式类名不要用数字开头

css(上)

阅读更多关于 css(上)

CSS 　　　　　　　　　　（层叠样式表）层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 css的三种引用方式: link标签中 href指定 mycss.css 文件的地址 style标签中直接写css代码在每个单独的标签中写css  <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三种方式</title><style> #d9 { color: black; } p{ color:orangered; }</style></head><body><p style="color: fuchsia;">你们一定努力啊!</p><p style="color:

前端基础之CSS

阅读更多关于前端基础之CSS

一、CSS介绍 CSS（ C ascading S tyle S heet，层叠样式表)定义如何显示 HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。二、CSS语法 1、CSS实例每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 2、CSS注释 /*这是注释*/ 三、CSS的几种引入方式 1、行内样式行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。 <p style="color: red">Hello world</p> 2、内部样式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p { /*字体颜色*/ color: red; /*背景颜色*/ background-color: blue;　　　　　　　 /* 字体大小（像素大小）*/ font-size: 14px; /* 外边距大小 */ margin: 14px; 　　　　　　　　　　　　　　　/* 边框颜色 */ border: 2px solid red; } </style> </head> 3、外部样式

css选择器总结

阅读更多关于 css选择器总结

本文转载于: 猿2048 网站 css选择器总结　　最近有点忙，所以没有发表博文，现在时间空闲下来了，好好的整理一下知识，今天总结一下css里面的一些选择器。　　css里的选择器有好多种，下面我就把我了解到的写一写，如果有不全的或者有误的欢迎留言指正，万分感谢。　　一、选择器　　1、* 通配符选择器　　　这个选择器是匹配页面中所有的元素，一般用来清除浏览器的默认样式. *{margin:0; padding:0} 　　2、元素选择器　　　　通过标签名来选择元素。 div{width:100px; height:100px;} 　　3、class选择器　　　　　class选择器 / 类选择器 / 用class属性给元素命名，在页面中可以出现很多次，相当于人的名字。 .box{width:100px; height:100px;} <div class="box"></div> <p class="box"></p> 　　4、 id选择器　　　　以id属性来命名，在页面中只能出现一次，具有唯一性，并且权重值最高，相当于一个人的身份证。 #box{width:100px; height:100px;} <div id="box"></div> 　二、高级选择器一　　　1、 E F 后代选择器　　　　匹配到E元素下面的所有的F元素（包括子、孙），空格隔开。 div

CSS基础(3)

阅读更多关于 CSS基础(3)

1.背景透明 background-color:rgba(0,0,0,.2) 2.背景大小 background-size: 取值：可以是像素单位，也可以是百分比 <style> .box { width: 600px; height: 600px; border: 1px solid blue; /* background-image: url(./images/l.jpg) */ background: url(./images/l.jpg) no-repeat; /* background-size: 300px; 只有一个值的时候，表示设置的宽度，但是高度也会随时一块等比例缩放 */ /* background-size: 300px 500px; 两个值的时候，第一个表示宽度，第二个表示高度 */ /* background-size: 50%; 图片要跟着盒子的宽度来设置百分比 */ /* background-size: cover; 铺满整个盒子，是等比例进行缩放铺满的，如果有溢出，则会将溢出隐藏掉*/ /* background-size: contain; 进行等比例缩放,只要有一边到达了盒子边框则停止缩放 */ } </style> 3.多背景图片就是将多个图片路径写在一块，中间用，隔开 background:url(image/aa.png) no

Css 选择器总结

阅读更多关于 Css 选择器总结

一、标签的权重性 div a span 1 （元素选择器） .box .site-nav 10 （类选择器） #box #site 100 （id选择器） <div style= 'width'> 1000 （行内选择器） !important 无穷大（注：权重相同后面为优先选中；后代继承权重为0）二、选择器的类型 1 元素选择器 p{ } a{ } 2.属性选择器 a[href]； img[alt="图片"] ； 3根据部分值选择 p[class~="important"]； 4. 字符串属性选择器 [abc^="def"]; 选择abc属性值器以“def”开头的元素； 5. 字符串属性选择器 [abc$="def"]; 选择abc属性值器以“def”结尾的元素； 6. 字符串属性选择器 [abc*="def"]; 选择abc属性值包含字符串“def”开头的元素； 7 特定属性类型 *[lang|="en"] {color: red;} 选择 lang 属性等于 en 或以 en- 开头的所有元素。 8 id选择器 #btn 9 后代选择器 #btn p 10 后代选择器 #btn>p 11 相邻选择器 #btn+p 12 伪类选择器 selector：first-child() (拓展a标签四中状态位置不可变：link未访问：visited已访问

CSS定位及文档流

阅读更多关于 CSS定位及文档流

今天看到一个面试题问哪种css的属性不会让div脱离文档流，答案有position分别是relative，abosolute，fixed及float的选项当时看到题不是太明白什么是文档流，查了下normal flow，其实就是html中从上到下，从左到右的显示顺序在这个过程中, 行内元素水平排列, 直到当行被占满然后换行; 块级元素则会被渲染为完整的一个新行（比如DIV就是一个块级元素）接下来再看看CSS中的浮动机制float，float会让当前元素漂移到左右，其它的布局会感知不到这个元素了，所以是脱离了正常的文档流的。接下来看看css中3种定位机制，abosolute是相对于第一个父元素进行定位（注意是有非static的position的，比如relative或者absolute的），fixed是相对于浏览器窗口进行定位，这2个都会脱离文档流。而relative是相对于该元素正常位置进行定位，其周边的元素不会变，所以使用了relative定位的元素是不脱离文档流的。参考文档： http://www.cnblogs.com/tim-li/archive/2012/07/09/2582618.html https://tink.gitbooks.io/fe-collections/content/ch03-css/normal-flow.html 来源： oschina

订阅 css第一个元素