Web基本笔记~04.css入门

上一期

CSS 的引入方式

内联样式（行内样式）

<p style="background: orange; font-size: 30px;">MyFirstCSS<p>

内部样式

<html><head><meta charset="utf-8" /><title></title><style>p {background: orange; font-size: 30px;}</style></head><body><p>MyFirstCSS<p></body>
</html>

外部样式

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

基础选择器

全局选择器

可以和任何元素匹配,不推荐使用

 *{margin: 0;padding: 0;}

元素选择器

就是内部样式案例的方式,不过实际应用中最常用的还是类选择器

<html><head><meta charset="utf-8" /><title></title><style>p {background: orange; font-size: 30px;}</style></head><body><p>元素选择器<p></body>
</html>

类选择器

这个最为灵活,实战中也用的最多。一般都是把css作为一个单独的文件存放,写完后直接调用需要的类即可。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.one{width:800px;}</style></head><body><h2 class="one">today</h2></body>
</html>

ID 选择器

相对来讲还可以

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>#my{border:3px dashed green;}</style></head><body><h2 id="my">today</h2></body>
</html>

背景属性

CSS 背景属性主要有以下几个

background-color 属性

属性设置背景颜色

<html><head><meta charset="utf-8"><title></title><style>.background{width: 300px;height: 200px;background-color: aquamarine;}</style></head><body><div class="background">color 颜色值<br/>transparent 默认值,背景是透明的<br/>inherit 从父类继承</div></body>
</html>

background-image 属性

设置元素的背景图像

元素的背景是元素的总大小，包括填充和边界（不包括外边距）。默认情况下background-image 属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小从图像的左上角显示元素大小的那部分。

<html><head><meta charset="utf-8"><title></title><style>.background{width: 300px;height: 200px;background-image:url(./img/a.jpg);}</style></head><body><div class="background">url 图像的地址 <br/>transparent 默认值,没有背景图像<br/>inherit 从父类继承</div></body>
</html>

background-repeat 属性

该属性设置如何平铺背景图像

<html><head><meta charset="utf-8"><title></title><style>.background{width: 300px;height: 200px;background-image:url(./img/a.jpg);background-repeat: no-repeat;}</style></head><body><div class="background">repeat 默认值，像垂直水平方向平铺<br/>repeat-x 只像水平平铺<br/>repeat-y 只像垂直平铺<br/>no-repeat 不平铺 <br/>inherit 从父类继承</div></body>
</html>

background-size 属性

属性设置背景图像的大小

<html><head><meta charset="utf-8"><title></title><style>.background{width: 300px;height: 200px;background-image:url(./img/a.jpg);background-repeat: no-repeat;background-size: 100% 100%;}</style></head><body><div class="background">length 设置背景图片的竞度和高度。简一个值设置宽度，第二个值设置高度。如果只没置一个值，第二个值会默认为autoperoentage 计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置高度。如果只设置一个值，那么第二个值默认为autocover 保持图像的淑模比并将图像缩没成完全覆盖背最定位区域的最小大小contain 保持图傍的调模比并将图像运瞒成适合背景定位区域的最大大小</div></body>
</html>

background-position

该属性设置背景图像的起始位置，其默认值是：0% 0%

background-position: center;

background-attachment 属性

该属性设置背景图像是否固定或者随页面滚动。简单来说就是一个页面有滚动条的话，滑动滚动条背景是固定的还是随页面滑动的

Web全栈~04.css入门相关推荐

Web全栈~09.JavaScript入门
Web基本笔记~09.JavaScript入门上一期 JavaScript是由Netscape(网景)公司研发出来的一种在它的Navigator浏览器上执行的程序语言. JavaScript简介 J ...
Web全栈~05.CSS属性
Web基本笔记~05.CSS属性上一期背景属性在上一期字体属性 CSS 字体属性定义字体,加粗,大小,文字样式 color 规定文本的颜色 <html><head>< ...
Web全栈~06.CSS选择器
Web基本笔记~06.CSS选择器上一期关系选择器后代选择器定义选择所有被 E 元素包含的 F 元素,中间用空格隔开语法 E F{ } 例子 <html><head> ...
Web全栈开发基础（小白入门版本）
博客传送门近几个月认真写了写Web全栈代码,有点小收获这里分享一下.我还做了个PPT,资源路径欢迎拍砖指点! Web全栈开发是一个听起来很虎的名词.本文从技术层面解释全栈开发,能帮助没有全栈概念, ...
手把手教你写web全栈入门项目—React+Koa+MongoDB（3w字教程，真的很详细，有代码）
手把手教你写web全栈入门项目-React+Koa+MongoDB
《Web全栈工程师的自我修养》读书笔记
<Web全栈工程师的自我修养>读书笔记 [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://w ...
php web教程视频教程下载,Web全栈 PHP+React系列视频教程下载
Web全栈 PHP+React系列视频教程下载课程介绍: 此套Web全栈 PHP+React系列视频教程覆盖PHP.前端和区块链应用开发三大热门职位,教程对网络基础.前端基础(HTML CSSJav ...
开课吧python全栈靠谱么-杭州Web全栈
Web全栈招生简章开课吧简介开课吧,中国有口皆碑的互联网人学习平台,为互联网从业者及潜在从业者提供O2O职业学习.就业.职业成长服务,让学习者收获互联网从业技能和能力,从而实现从"校园& ...
Web全栈工程师技能树梳理
FSE-SKILL-TREE Web全栈工程师技能树梳理各个分支正在细化中,欢迎Star.PR. 点击链接加入群[Web全栈QQ群]:https://jq.qq.com/?_wv=1027& ...

Web全栈~04.css入门