web前端开发特殊代码 Web前端开发知识点之CSS的使用方式

对于前端开发比较关注的小伙伴们一定非常关心web前端开发特殊代码 Web前端开发知识点之CSS的使用方式，今天我爱编程网小编为大家整理了以下内容，下面一起来看看吧。

web前端开发知识点

想成为一名合格的前端工程师需要熟练使用HTML、CSS、Javascript，相关的知识点也很多，下面简单分享下基础内容：
1、HTML css基本样式基础，了解常用标签的意义及用法，css样式代码添加；
2、了解操作系统，熟悉Unix和Linux的基本知识；
3、了解Web服务器，包括对Apache的基本配置，htaccess配置技巧的掌握等；
4、了解ajax基本操作功能 创建快速动态网页；
5、熟悉vue js 程序编写方法，在单页和多页中自如使用，理解原理并在真实项目中应用；
6、如何注册以及开发小程序；
7、node基础知识，node.js安装 模块系统 npm包管理器；
8、react基础知识，熟练使用各类API功能，可以动手开发一个基于react.js框架的UI组件，通过组件的方式实现页面模板功能等。
硬件型号：惠普暗影精灵6
系统版本：Windows10 专业版
软件版本：null

我爱编程网

Web前端开发知识点之CSS的使用方式

今天小编要跟大家分享的文章是关于Web前端开发知识点之CSS的使用方式。本文章小编从与HTML的结合方式、CSS语法、选择器以及盒子模型四个方面进行讲解。下面来和小编一起看一看吧！


一、与HTML的结合方式


CSS与HTML的结合方式一共有三种，分别是：外部样式、内部样式和内联样式。


①外部样式


当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在文档的头部：


_








或者可以像下面这样在





②内部样式


当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用





③内联样式


要使用内联样式，你需要在相关的标签内使用样式(style)属性。


_


Thisisaparagraph





由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。


二、CSS语法


CSS语法规则由两个主要的部分构成：选择器，以及一条或多条声明。


选择器通常是您需要改变样式的HTML元素。


每条声明由一个属性和一个值组成。两条声明之间被分号分开。


属性是您希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。


在下面这个例子中，h1是选择器，color和font-size是属性，red和14px是值。





三、选择器


CSS的选择器主要分为两大类，一类基本选择器；一类扩展选择器。


①基本选择器


基本选择器包括id选择器，元素选择器和类选择器。


id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以"#"来定义。例如下面代码指定id为red的标签中文本为红色。


#red{color:red;}


元素选择器可以为相应的HTML元素指定特定的样式。元素选择器前面没有任何字符。例如下面代码指定div标签中文本为红色。


div{color:red;}


类选择器可以为标有特定class的HTML元素指定特定的样式。类选择器以一个点号显示。例如下面代码指定class为center的标签中文本居中对齐。


.center{text-align:center}


②扩展选择器


扩展选择器是在基本选择器的基础上扩展出来的，下面介绍几种常见的。


*选择器(*
{})可以为HTML的所有元素指定特定的样式。例如下面代码指定HTML页面中所有文本为红色。


*{color:red;}


并集选择器(选择器1,选择器2{})可以为多个选择器指定特定的样式。例如下面代码指定div和span两种标签中文本为红色。


div,span{color:red;}


子选择器(选择器1选择器2{})可以为选择器1中的选择器2指定特定的样式。例如下面代码指定div中span标签文本为红色。


divspan{color:red;}


父选择器(选择器1>选择器2{})可以为含有选择器2的选择器1指定特定的样式。例如下面代码指定含有span的div标签文本为红色。


div>span{color:red;}


属性选择器(元素[属性="属性值"])可以为含有该属性且属性值等于该值的元素指定特定的样式。其中，元素和属性值可以省略。例如下面代码指定align属性等于center的div标签文本为红色。


div[align="center"]{color:red;}


伪类选择器(元素:状态{})可以为该元素处于该状态时指定特定的样式。例如下面的代码指定鼠标悬浮在超链接上时文本为红色。


a:hover{color:red;}


四、盒子模型


所有HTML元素可以看作盒子，在CSS中，"box
model"这一术语是用来设计和布局时使用。


CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。


盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。


下面的图片说明了盒子模型：






Margin(外边距)-清除边框外的区域，外边距是透明的。


Border(边框)-围绕在内边距和内容外的边框。


Padding(内边距)-清除内容周围的区域，内边距是透明的。


Content(内容)-盒子的内容，显示文本和图像。



默认情况下，标签的width和height属性指的是content(内容)的宽和高，我们在设置边框和边距的时候一定要注意。如果想要让width和height是最终盒子的大小，可以设置下面的代码：


box-sizing:border-box;


以上就是小编今天为大家分享的关于Web前端开发知识点之CSS的使用方式的文章，希望本篇文章能够对正在从事web前端工作和学习的小伙伴们有所帮助，想要了解更多web前端知识记得关注北大青鸟web培训官网，最后祝愿小伙伴们工作顺利，城市一名优秀的web前端程序员。


文章来源：原创_绲墓适_

web前端代码问题——css3

左上三角形
#topleft {
width: 0;
height: 0;
border: 100px solid red;
border-color: red transparent transparent red;
}

右下三角形
#bottomright {
width: 0;
height: 0;
border: 100px solid blue;
border-color: transparent blue blue transparent;
}
直接用渐变好像不行

以上就是我爱编程网小编为大家带来的内容了，希望能够帮助到大家，了解更多前端开发资讯敬请关注我爱编程网。