零基础学前端开发之CSS基础
第三章:CSS3样式基础
知识点:
1.CSS概念
2.CSS语法格式
3.CSS的使用
4.三类范围
为什么使用CSS
化妆前:
化妆后:
HTML语法,在网页上显示数据,第一章p br b font 第二章 table form标签。
网页增加效果,就是样式,样式相当于女孩儿化妆。
1.CSS概念
层叠样式表(Cascading Style Sheet)
html是骨架,是内容。css是衣服,起到装饰的作用,花花绿绿的。
优势
- 内容与表现分离
- 网页的表现统一,容易修改
- 丰富的样式,使页面布局更加灵活
- 减少网页的代码量,增加网页的浏览速度,节省网络带宽
- 运用独立于页面的CSS,有利于网页被搜索引擎收录
2.语法格式
语法格式:
范围分三类
行内样式、页内样式、外部样式这三类。
2.1行内样式
<font color='red'><p>静夜思</font></font>
<p style="font-style: italic;font-size: 24px;"><p
style=“属性:值;属性2:值2;属性3:值3;”
这种风格,仍然不太友好,就是HTML5标签里面包含了样式,我们的目的是让二者尽量分离,分离的好处,就是格式更为清晰。
2.2页内样式
页内样式的范围,比行内样式要大,在整个网页内部可以使用。
<style>p{font-size:18px;color:green;}
</style>
设计了一个行内样式,写了一个p标签的样式,好处是只要是p标签,都变色了。坏处呢?都变了。
h1{text-align: center;}
4.背景样式的使用:
解决大图:不能显示完毕,第一种笨方法:复制、粘贴很多
第二种简单方法:直接设置body的高度为2500px;
超链接样式+导航效果:
<!--1.网页格式--><table id="daohang"><tr><td><a href="复习.html">二次元</a></td><td><a href="index.html">脑残</a></td><td><a href="">科幻</a></td><td><a href="">搞笑</a></td><td><a href="">鬼畜</a></td></tr></table>
样式:
<!--2.样式;border-collapse: collapse;去除间隙,出来一条线;text-decoration: none;去除a标签的下划线 ;a:hover:悬停效果;--><style>table{width:100%;border:1px solid #f00;border-collapse: collapse;}tr{text-align: center;}td{border:1px solid #f00;height: 50px;}a{text-decoration: none;font-size: 18px;}a:hover{color: red;}</style>
2.3 外部样式
比如,化妆;行内样式,像描眉一样,非常的细腻;
页内样式:像化妆的时候,向脸部图白色;
外部样式:相当于变脸的,抖音看下,男的可以变女;买个皮;
3.选择器类型
1.标签选择器
标签{ 属性:值;属性2:值2;属性3:值3}
命名时,仅数字、字母、下划线可用,且数字不可开头,标签也不可用于id命名
id选择器不可重复 独一无二
2.类选择器
类样式选择:就是给标签分类;
在设计CSS样式;text-align:center:文本居中;right:文本居右.;类样式选择器,定义之后,可以在下面多个地方进行
调用 。定义的语法格式:
.类样式名{属性:值;属性2:属性2:值2;属性3:值3}
调用的时候:
class=“类样式名”
3.ID选择器
ID:编号,学号、考号,都是唯一的。网页当中,我们一般用唯一标识的一个标签,使用ID选择器,用来和其他标签做区分,一般使用ID选择器的都是大范围的标签。
定义ID选择器使用#选择器名 {属性:值;属性2:值2;属性3:值3}
命名时,仅数字、字母、下划线可用,且数字不可开头,标签也不可用于class命名
一个标签可用多个类名 共性样式可以巧用
作业:大家可以使用截图的方式,来实现一个简单的网站页面.
4.通配符选择器
通配符选择器是用来选择所有元素。比如下面将页面上所有元素的 margin 和 padding 都设置为 0。
* {``marigin: ``0``;``padding``: ``0``;
}
总结一下:
如果设置块大范围,一般使用ID选择器,它是唯一的;如果设置多个类别的时候,就使用类别选择器(类样式选择器)如果网页中有很多同类的标签有共同的样式,可以使用标签选择器。
4.选择器使用范围
行内样式:眼影;行内样式是style属性
页内样式:自己新衣服;页内样式,是style标签;也可以多次使用,被当前页面内的多个标签多次使用。
外部样式:租用婚纱;外部样式没有了style
<link rel="stylesheet" href="css/wai.css" type="text/css"/>
外部样式的好处是,定义一次,可以被多个网页使用。
5.选择器的优先级
外部<页内<行内,距离最近的样式优先使用
id选择器>class选择器>标签选择器
优先级的提升
!important(仅可直接选中):使得优先级最大
6.字体样式
修改字体时,只要电脑内有的字体都可以进行修改
怎么看电脑内装的字体,计算机,c盘,Windows,fonts,就可以看到我们电脑上装的所有字体
letter-spacing:字母间距
7.文本样式
- color颜色取值的格式
1、直接写颜色 也要复合写法 yellowgreen 黄绿色
2、16进制
3、RGB 红绿蓝 三原色
颜色不需要记,ui会给你的 - 文字对齐方式
text-align: center 居中
right 右对齐
left 左对齐
对齐参照点不同 ,对齐的方式也不同,以父级元素为标准,不设宽度,默认为浏览器宽度。暂时有这个概念,盒子模型学完就推翻了
如果想要指定对齐,需要设置宽和高
宽:weight 高:hight - text-indent 首行缩进
单位可以是px,像素,也可以是em,即缩几个字体,根据全部字体的大小来变化,首行缩进用em比较合适
开启控制台进行调整 - line-height: 设置行高,设置文字的垂直居中 line-height,和父元素的高度保持一致,即垂直居中
- 设置文本装饰
text-decoration: line—throw 中划线
underline 下划线
overline 上划线
8.伪类
概念:
格式 ,加冒号
ul>li:first-child、last-child等伪类。
超链接的伪类:a:link、a:visited、a:hover、鼠标cursor:wait|pointer
a:hover 必须位于 a:link 和 a:visited 之后,这样才能生效!
在 CSS 定义中,a:active 必须位于 a:hover 之后,这样才能生效!
9.鼠标
鼠标指针变化
直接在style下面写属性cursor:值;
值 描述
url 需使用的自定义光标的 URL。注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。
default 默认光标(通常是一个箭头)
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针(一只手)
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右(东)移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。
n-resize 此光标指示矩形框的边缘可被向上(北)移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。
s-resize 此光标指示矩形框的边缘可被向下移动(南)。
w-resize 此光标指示矩形框的边缘可被向左移动(西)。
text 此光标指示文本。
wait 此光标指示程序正忙(通常是一只表或沙漏)。
help 此光标指示可用的帮助(通常是一个问号或一个气球)。
10.作业
使用CSS类来制作京东导航
零基础学前端开发之CSS基础相关推荐
- 零基础学前端开发之CSS3深入选择器
知识点: 1.并集选择器(多个) 2.交集选择器(组合选择器) 3.子代选择器 4.后代选择器 5.属性选择器 6.结构伪类选择器 7.伪元素选择器 8.案例作业 1.并集选择器 语法: 选择器1,选 ...
- 050.前端开发之HTML基础及常用标签
050.前端开发之HTML基础及常用标签 文章目录 一.前端开发介绍 (一)前端开发都有哪些内容 1.HTML是什么? 2.CSS 3.JavaScript 4.HTML.CSS和JavaScript ...
- 【转载】前端开发之CSS兼容写法经验总结
为什么80%的码农都做不了架构师?>>> 前端开发之CSS兼容写法经验总结技术 maybe yes 发表于2014-11-23 22:47 原文链接 : http://blog ...
- 0基础学前端开发,CSS盒子模型居中方法
1. 背景 作为互联网行业技术从业者,接口调试是必不可少的一项技能,通常我们都会选择使用 Postman 这类工具来进行接口调试,在接口调试方面 Postman 做的确实非常出色. 但是在整个软件开发 ...
- 零基础学前端之HTML全套基础教程【学习笔记】
[前端总路线学习笔记] 文章目录 HTML全套基础教程[学习笔记] 1.系统结构 2.软件环境准备 3.HTML概述 4. 我的第一个HTML 5. HTML的基本标签 6.HTML的实体符号 7. ...
- web前端开发之vue基础
一.vue基础 1.1 啥是vue 1.1.1 创建vue 引入vue.js 的cdn节点 <script src="https://cdn.jsdelivr.net/npm/vue/ ...
- 前端开发之JavaScript基础篇一
主要内容: 1.JavaScript介绍 2.JavaScript的引入方法和输出及注释 3.javaScript变量和命名规则 4.五种基本数据类型 5.运算符 6.字符串处理 7.数据类型转换 ...
- 前端开发之JavaScript基础篇四
主要内容: 1.定时器 2.正则表达式入门 3.元字符 4.正则表达式实战运用 一.定时器 javaScript里主要使用两种定时器,分别是:setInterval()和setTimeout(). 1 ...
- Web前端开发之CSS学习笔记3—颜色和背景
目录 1.CSS的颜色表达 1.1前景色color 1.2背景色background-color 2.背景 2.1 background-image:url()设置背景图; 2.2 backgroun ...
最新文章
- linux系统 大分区,linux大硬盘怎么分区
- 水下机器人线上赛战火升级,目标检测、通信赛项等你来战
- java 循环赛问题,网球循环赛思路 - 分治法求解(无代码)
- android点滴27:R文件无法加载 R cannot be resolved to a v...
- Windows7系统下编译安装X264
- Java 文件流操作.,互联网 面试官 如何面试
- DSP到底是个什么鬼?看完你就懂了
- 华为U8500刷了2.2后自定义铃声,短信通知音,闹铃音的方法
- html中的abbr有什么作用,html中关于abbr 标签的使用以及作用的详解
- 罗技G603鼠标欧姆龙D2FC-F-7N微动开关拆解修复双击问题要点解析
- 图片转cad用什么软件?转换有技巧
- VOT数据集报错问题
- GTX 1050ti和GTX960哪个好
- Oracle基础包之DBMS_RLS(八)
- 宇宙文明等级的划分标准
- linux2017期末试卷,LINUX认证考试模拟试题及答案
- Linux下的常见指令以及权限理解(下)
- 【渝粤教育】 国家开放大学2020年春季 2585城市轨道交通概论 参考试题
- 鸿蒙系统全面屏手势,最后倒计时!谷歌正式开始回收安卓系统权限,开始反击鸿蒙系统?...
- DDR、DDR2、DDR3、DDR4、LPDDR区别(自用)
热门文章
- Hadoop常见错误解析
- android 录像实时传送,Android中实时视频传输(摄像头实时视频传输)解决方案
- 数据结构——排序算法(含动态图片)
- 22行代码AC——习题5-6 对称轴(Symmetry,UVa1595)——解题报告
- java中判断两个方法是否相同
- linux 两个序列比对,如何用COBALT构建本地的多序列比对(Linux系统)
- python批量解压文件_python 批量解压压缩文件的实例代码
- AsyncTask的用法
- Java 字符串 String 与整数型 int 之间的转换
- mysql rowdatapacket_arrays – 将此RowDataPacket对象数组缩小为单个对象