前端基础_CSS

JerryZou 发布于2019-08-30 15:55 / 3341人阅读

摘要：书写语法内部与外部样式选择器样式属性值样式内联样式样式样式基础选择器选择器选择器元素选择器以上三种基本选择器可以拼接在一起，匹配更准确例如选择器的作用匹配元素高级选择器组合选择器通配符选择器后代选择器子元素选择器相邻兄弟选择器选择后面相邻的

CSS 书写语法

内部与外部样式

选择器 {
    样式1;  // 属性: 值; width: 300px
    样式2;
}

内联样式


   // width: 300px

CSS 基础选择器

ID选择器

#id{ }

class选择器

.cls{ }

元素选择器

div{ }
div.cls{ }

以上三种基本选择器可以拼接在一起，匹配更准确 例如：div.cls{ }
选择器的作用：匹配HTML元素

CSS 高级选择器

组合选择器

element,element{ }

通配符选择器

*{ }

后代选择器

pElement subElement{ }

子元素选择器

pElem > subElem{ }

相邻兄弟选择器

div + a{ }    // 选择div后面相邻的a标签

属性选择器

[attribute]{ }
element[attribute]{ }
element[attribute=value]{ }

伪类选择器

a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}    /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接 */
p:first-child { }

伪元素选择器

div::after{ content:"" }
div::before{ content:"" }

CSS 优先级

内部样式和外部样式合并

!important > 行间样式 > ID选择器 > 类选择器/属性选择器/伪类选择器 > 元素选择器/伪元素选择器 > 通配符选择器

.cls{}      //0-0-0-1-0
#id{}       //0-0-1-0-0
div.cls{}   //0-0-0-1-1

CSS 常用样式

文字

字体：font-family: "Times New Roman", Times, serif;
颜色：color: red;
字体大小：font-size: 40px;
字体粗细：font-weight: 900;
字体样式：font-style：italic;

盒子

外边距：margin：15px;
内边距：padding: 20px;
边框： border: 1px solid #999;
宽： width: 500px;
高： height: 400px;

背景

集成属性写法：
background: #0079D2 url(img/jt.jpg) no-repeat fixed 50% 20%;

单个属性写法：
背景图大小：background-size:80px 60px; 
背景颜色：background-color:yellow;
背景图位置：background-position:center; 
背景图重复：background-repeat：no-repeat;
背景图：background-image:url("paper.gif");

行高

line-height: 30px;     // 文字居中使用  取值可以是%，数值，像素

显示与隐藏

1、display
隐藏样式：display:none;
显示样式：display:非none的其它值

2、visibility
隐藏：visibility:hidden;
显示：visibility:visible;

定位

position

取值：absolute、relative、fixed

1、绝对定位

CSS 布局

html标签分类

块级元素（block）
1、可以设置宽、高，不设置宽度，默认100%
2、独占一行
3、块级元素可以嵌套块级元素和行内元素

行内元素（inline）
1、行内元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行
2、不支持设置宽、高，其宽和高随元素的内容而变化
3、行内元素只能嵌套行内元素，不能嵌套块级元素和行内块元素

行内块元素（inline-block）
1、可以设置宽、高
2、行内元素不会独占一行
3、块级元素可以嵌套块级元素和行内元素

布局种类

1、table 表格布局
2、float 浮动布局 （重点）
3、inline-block布局
4、flexbox 布局  （现在布局方式）

float 浮动布局

容器需要清浮动，子元素需要浮动（float: left/right;）

/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";}
.clearfloat{zoom:1}    /*可解决ie6,ie7浮动问题*/

云服务器 GPU云服务器 css基础基础css css基础教程前端css

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

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

前端规范(ES6BEMOOCSSSMACSS)

摘要：前端规范在实际开发中，由于团队成员编码习惯不一，技术层次不同，开发前定制并遵循一种代码规范能提高代码质量，增加开发效率。是定义了一种的命名规范，每个名称及其组成部分都是存在一定的含义。前端规范在实际开发中，由于团队成员编码习惯不一，技术层次不同，开发前定制并遵循一种代码规范能提高代码质量，增加开发效率。 Javascript Javascript规范直接参考airbnb: ES6 ...

Object 2019-08-02 15:54 评论0 收藏0
前端规范(ES6BEMOOCSSSMACSS)

摘要：前端规范在实际开发中，由于团队成员编码习惯不一，技术层次不同，开发前定制并遵循一种代码规范能提高代码质量，增加开发效率。是定义了一种的命名规范，每个名称及其组成部分都是存在一定的含义。前端规范在实际开发中，由于团队成员编码习惯不一，技术层次不同，开发前定制并遵循一种代码规范能提高代码质量，增加开发效率。 Javascript Javascript规范直接参考airbnb: ES6 ...

willin 2019-08-30 13:02 评论0 收藏0
前端规范(ES6BEMOOCSSSMACSS)

摘要：前端规范在实际开发中，由于团队成员编码习惯不一，技术层次不同，开发前定制并遵循一种代码规范能提高代码质量，增加开发效率。是定义了一种的命名规范，每个名称及其组成部分都是存在一定的含义。前端规范在实际开发中，由于团队成员编码习惯不一，技术层次不同，开发前定制并遵循一种代码规范能提高代码质量，增加开发效率。 Javascript Javascript规范直接参考airbnb: ES6 ...

levy9527 2019-08-19 18:18 评论0 收藏0
前端规范(ES6BEMOOCSSSMACSS)

摘要：前端规范在实际开发中，由于团队成员编码习惯不一，技术层次不同，开发前定制并遵循一种代码规范能提高代码质量，增加开发效率。是定义了一种的命名规范，每个名称及其组成部分都是存在一定的含义。前端规范在实际开发中，由于团队成员编码习惯不一，技术层次不同，开发前定制并遵循一种代码规范能提高代码质量，增加开发效率。 Javascript Javascript规范直接参考airbnb: ES6 ...

xushaojieaaa 2019-06-24 17:51 评论0 收藏0
如何合理的规划前端之路

摘要：什么是前端工程师总而言之就是运用等技术，在工作中配合设计师实现用户界面，和后端工程师进行数据对接，完成应用开发的职位。什么是前端工程师？总而言之,就是运用 HTML、CSS、JavaScript 等 Web 技术，在工作中配合UI设计师实现用户界面，和后端工程师进行数据对接，完成 Web 应用开发的职位。Tips:个人博客排版、UI更佳；地址：https://haonancx.git...

skinner 2019-08-02 15:56 评论0 收藏0