css 学习笔记【二】-背景,渐变,链接文档的MIME类,id选择器和类选择器的区别

简介: css 学习笔记【二】-背景,渐变,链接文档的MIME类,id选择器和类选择器的区别

CSS3背景

四种背景属性:

background-image:添加背景图片。不同的背景图像和图像用逗号隔开。

background-size:指定背景图像的大小,可指定像素或者百分比的大小,是相对于父元素的宽度和高度的百分比的大小。

background-origin:指定了背景图像的位置区域

background-clip:背景裁剪属性是从指定位置开始绘制。

CSS3渐变

渐变可以让我们在两个或者多个颜色之间显示平稳的过渡。

两种类型的渐变:

Linear Gradients:线性渐变-向下/向上/向左/向右/对角方向

Radial Gradients:径向渐变,由它们的中心定义

线性渐变:
语法:background:linear-gradient(direction, color-stop1, color-stop2, …);

线性渐变默认情况是从上到下。

从左到右的线性渐变:

grad {undefined

background: -webkit-linear-gradient(left, red, blue);

background: -o-liner-gradient(right, red, blue);

background: -moz-linear-gradient(right, red, blue);

background: linear-gradient(to right, red, blue);/标准语法/

}

从左上角开始到右下角的渐变:
设置方向为:left top/bottom right/to bottom right(标准语法下)

使用角度对方向进行设置:
这里的角度是指水平线和渐变线之间的角度。So 0deg将创建一个从下到上的渐变,90deg将创建一个从左到右的渐变。

使用透明度:
支持透明度,用于创建减弱变淡的效果。

为了添加透明度,使用rgba()函数来定义颜色结点。rgba()函数中的最后一个参数可以是从0到1的值,它定义了颜色的透明度:0表示完全透明,1表示完全不透明。

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

href值为外部资源地址,这里是css的地址

rel定义当前文档与被链接文档之间的关系,这里是外部css样式表即stylesheet

type规定被链接文档的MIME类,这里是值为text/css

(首先这是百度说的),第二说说我在做这个部分遇到的几个问题:
第一就是格式,我们在外部建立格式表的时候,一定要记得通过重命名将文本改成.css格式。还有就是与html里建立连接的代码格式一定不要写错。

第二,这个问题我也没有找出原因,按理说<!DOCTYPE html>这行代码存在就是为了提高兼容性,但是我建立了同样的表,在chrome里完全打不开,但是在bing里面就能打开。

行内插入就是像属性的插入方法一样,用style=某些格式来进行插入:

(这是我没有在

标签中链接外表,而是直接在我需要更改的标签格式内容里进行更改)
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<--! 这就是直接对h1标签内容进行格式更改,用属性添加的办法>
<p style="color:red;">This is a paragraph.</p>

id选择器和类选择器的区别

① 类选择器(class)好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用。

② id 选择器好比人的身份证号码,全中国是唯一的,不得重复。

③ id 选择器和类选择器最大的不同在于使用次数上。

④ 类选择器在修改样式中用的最多,id 选择器一般用于页面唯一性的元素上,经常和 javaScript 搭配使用。

相关文章
|
23天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
35 5
|
1月前
|
前端开发 Ruby
CSS 预编语言的区别
【10月更文挑战第24天】Sass、Less 和 Stylus 等 CSS 预编语言在语法特点、功能特性、性能表现、社区和生态系统等方面存在着不同之处。在选择使用哪种预编语言时,需要综合考虑项目需求、团队技术偏好、个人习惯等因素。你可以根据具体情况进行评估和选择,以充分发挥这些语言的优势,提高前端开发的效率和质量。
|
1月前
|
前端开发 开发者 UED
设备像素、css像素、设备独立像素、dpr、ppi之间的区别
【10月更文挑战第24天】在实际应用中,这些概念相互关联,共同影响着网页在不同设备上的显示表现。开发者需要了解它们之间的区别和关系,以便更好地进行网页设计和优化,确保在各种设备上都能提供良好的用户体验。
|
1月前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
48 2
|
2月前
|
前端开发 JavaScript
css的引入方式和区别
css的引入方式和区别
41 0
|
2月前
|
前端开发
CSS常见的选择器
CSS常见的选择器
25 0
|
4月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
|
23天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
46 7
|
23天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
31 6