HTML笔记——④css样式表、选择器、常用属性
HTML笔记——④css样式表、选择器、常用属性
- 一 CSS
- 1.1 CSS语法
- 1.2 CSS样式表
- 1.2.1 内部样式表
- 1.2.2 外部样式表
- 1.2.3 行内样式表
- 1.3 CSS常用属性
- 1.3.1 颜色
- 1.3.2 CSS背景样式
- 1.3.3CSS边框样式
- 1.3.4 CSS文字样式
- 1.3.5 CSS段落样式
- 1.3.6 CSS复合样式
- 二 CSS选择器
- 2.1 元素选择符/类型选择符(element选择器)
- 2.2 class选择器/类选择器
- 2.3 ID选择器
- 2.4 通配符/通配选择器
- 2.5 群组选择器
- 2.6 层次选择器——后代选择器
- 2.7 伪类选择器
- 2.8 选择器的权重
- 三 CSS常用属性
- 3.1 文本属性
- 3.2 列表属性
- 3.3 背景属性
- 3.4 浮动属性
- 四 盒子模型
- 4.1 盒子模型例图
一 CSS
Cascading Style Sheet 层叠样式表,用于修饰网页信息的显示样式,目前推荐遵循的是W3C发布的CSS3.0.
CSS实现内容与样式的分离,便于团队开发、维护
1.1 CSS语法
- 每个CSS样式由两部分组成:选择符和声明,声明又分为属性和属性值;
- 属性必须放在
{}
中,属性与属性值用:
连接。 - 每条声明用
;
结束。 - 当一个属性有多个属性值的时候,属性值与属性值不分先后顺序,用空格隔开。
- 在书写样式过程中,空格、换行等操作不影响属性显示。
选择器 { 属性1 : 值1 ; 属性2 : 值2 }
1.2 CSS样式表
CSS样式表分为内部样式表、外部样式表、行内样式表
同一标签的同一属性优先级是最近原则 可以添加!important
改变优先级
1.2.1 内部样式表
- 格式:
<style></style>
- 一般放在
<head>
中便于区分
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width:100px;height:100px;background-color: red;}</style>
</head>
<body><div>区域块</div><span>内联</span>
</body>
</html>
1.2.2 外部样式表
- 引入一个单独的CSS文件,后缀是.css
- 通过
link
标签引入外部资源,rel
属性指定资源跟页面的关系,href属性资源的地址。
或者通过@import方式引入外部样式 ( 这种方式有很多问题,不建议使用 )
<link rel="stylesheet" type="text/css" href="css/index.css" /><style>@import url(css/index.css);
</style>
扩展知识点:link和import之间的区别
- 本质的差别:link属于XHTML标签,而@import完全是CSS提供的一种方式。
- 加载顺序的差别:当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。
- 兼容性的差别:@import是CSS2.1提出的,所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
1.2.3 行内样式表
<h1 style="color:red;">11111111111111-aaa</h1>
1.3 CSS常用属性
1.3.1 颜色
- 单词表示法 : red blue green yellow …
<style>div{background-color:red;}
</style>
十六进制表示法:#000000 #ffffff
0 1 2 3 4 5 6 7 8 9
0 1
0 1 2 3 4 5 6 7 8 9 a b c d e frgb三原色表示法:rgb(255,255,255);
取值范围 0 ~ 255
获取颜色的工具:
提取颜色的下载地址
photoshop工具
1.3.2 CSS背景样式
background-color 背景色
background-image 背景图
url(背景地址)
默认:会水平垂直都铺满背景图
background-repeat 平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat ( x , y 都进行平铺,默认值 )
no-repeat 都不平铺
background-position : 背景位置
x y : number(px、%) | 单词
x : left、center、right
y : top、center、bottom
background-attachment : 背景图随滚动条移动的方式
scroll : 默认值 ( 背景位置是按照当前元素进行偏移的 )
fixed ( 背景位置是按照浏览器进行偏移的 )
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width:2000px;height:2000px;background-image:url(./图片合集/QQ截图20221022195509.png);background-repeat:repeat-x;}</style>
</head>
<body><div></div>
</body>
</html>
1.3.3CSS边框样式
border-style : 边框样式
solid : 实线
dashed : 虚线
dotted : 点线
border-width : 边框大小
px …
border-color : 边框颜色
red #f00 …
边框也可以针对某一天边进行单独设置 : border-left-style : 中间是方向 left、right、top、bottom
颜色:透明颜色 transparent
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#div1{width:300px;height:300px;border-style: dotted;border-color: red;border-width: 20px;}#div2{width:300px;height:300px;border-right-style: dotted;border-right-width: 10px;border-right-color: blue;}</style>
</head>
<body><div id="div1"></div><div id="div2"></div>
</body>
</html>
1.3.4 CSS文字样式
font-family : 字体类型
英文、中文
衬线体、非衬线体
注意点:
1.多个字体类型的设置目的
2.引号的添加的目的
font-size : 字体大小
默认 : 16px
写法 : number(px) | 单词 ( small large … 不推荐使用)
font-weight : 字体粗细
模式: 正常( normal ) 加粗 ( bold )
写法:单词(normal、bold) | number ( 100 200 … 900 , 100到500都是正常的,600都900都是加粗的 )
font-style : 字体样式
模式: 正常 ( normal ) 斜体 ( italic )
写法:单词 ( normal 、 italic )
注:oblique也是表示斜体,用的比较少,一般了解即可。
区别:1.italic 带有倾斜属性的字体的才可以设置倾斜操作。
2.oblique 没有倾斜属性的字体也可以设置倾斜操作。
1.3.5 CSS段落样式
text-decoration:文本装饰
下划线 : underline
删除线 :line-through
上划线 : overline
不添加任何装饰 : none
注:添加多个文本修饰:line-through underline overline
text-transform:文本大小写 ( 针对英文段落 )
小写:lowercase
大写:uppercase
只针对首字母大写:capitalize
text-indent : 文本缩进
首行缩进
em单位:相对单位,1em永远都是跟字体大小相同
text-align : 文本对齐方式
对齐方式 : left 、right、center、justify(两端点对齐)
line-height : 定义行高
什么是行高,一行文字的高度,上边距和下边距的等价关系。
默认行高:不是固定值,而是变化的。根据当前字体的大小再不断的变化。
取值:1. number( px ) | scale ( 比例值 , 跟文字大小成比例的 )
etter-spacing : 字之间的间距
word-spacing : 词之间的间距 ( 针对英文段落的 )
英文和数字不自动折行的问题:
1. word-break : break-all; (非常强烈的折行)
2. word-wrap : break-word;(不是那么强烈的折行 ,会产生一些空白区域)
<style>p{width:300px;text-decoration: underline overline;}</style>
1.3.6 CSS复合样式
复合的写法,是通过空格的方式实现的。复合写法有的是不需要关心顺序,例如background、border;有的是需要关心顺序,例如font。
1. background : red url() repeat 0 0;
2. border : 1px red solid;
3. font :
注:最少要有两个值 size family
weight style size family √
style weight size family √
weight style size/line-height family √
注:如果非要混合去写的话,那么要先写复合样式,再写单一样式,这样样式才不会被覆盖掉。
二 CSS选择器
要使用CSS对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器
2.1 元素选择符/类型选择符(element选择器)
- 语法:
元素名称{属性:属性值;属性:属性值;}
- 当统一文档某个元素的显示效果时,可以使用类型选择符
(如:改变文档所有p段落样式)
2.2 class选择器/类选择器
- 语法:.
.class名{属性:属性值;}class="class名"
- 用法:
class选择器更适合定义一类样式;
class选择器是可以复用的。
可以添加多个class样式。
多个样式的时候,样式的优先级根据CSS决定,而不是class属性中的顺序。
2.3 ID选择器
- 格式:
#id名{} id="id名"
- 用法:
ID是唯一值,在一个页面中只能出现一次,出现多次是不符合规范的。且不能多个使用
命名的规范:由字母、下划线、中划线、数字(并且第一个不能是数字)
2.4 通配符/通配选择器
- 格式:
*{属性:属性值;}*{margin: 0;padding: 0;}
- 用法:去掉所有标签的默认样式时,主要用于外边距(margin)、内边距(padding)的设置;尽量避免使用通配选择器,因为会给所有的标签添加样式。
2.5 群组选择器
- 语法:可以通过逗号的方式,给多个不同的选择器添加统一的CSS样式
选择符1,选择符2,选择符3……{属性:属性值;}
例:div, h1{width:960px;}
- 用途:当有多个选择符应用相同的声明时,可以将选择符用
,
分隔的方式,合并为一组
2.6 层次选择器——后代选择器
- 语法:
选择符1 选择符2{属性:属性值;}后代 M N { }父子 M > N { }兄弟 M ~ N { } 当前M下面的所有兄弟N标签相邻 M + N { } 当前M下面相邻的N标签
- 用法:选择符1中包含的所有选择符2;
如:结构:
<ul class="list">
<li></li>
<li></li>
<li></li>
</ul>
样式:. list li{background:red;}
2.7 伪类选择器
- 语法:
a:link{属性:属性值;}超链接的初始状态;( 只能添加给a标签 )
a:visited{属性:属性值;}超链接被访问后的状态;( 只能添加给a标签 )
a:hover{属性:属性值;}鼠标悬停,即鼠标划过超链接时的状态;(可以添加给所有的标签)
a:active{属性:属性值;}超链接被激活时的状态,即鼠标按下时超链接的状态;(可以添加给所有的标签)
- 说明:应注意他们的顺序,正常顺序为:a:link、a:visited、a:hover、a:active;
- 为了简化代码,可以把伪类选择符中相同的声明提出来放在a选择符中;
例如:a{color:red;}a:hover{color:green;}
表示超链接的初始和访问过后的状态一样,鼠标划过的状态和点击时的状态一样。
2.8 选择器的权重
当多个选择器,选中的是同一个元素,且都为他们定义了样式,如果属性发生冲突了,会选择权重高的来执行
- CSS选择器解析规则:当不同选择符的样式设置有冲突的时候,高权重选择符的样式会覆盖低权重选择符的样式;相同权重的选择符,样式遵循就近原则:哪个选择符最后定义,就采用哪个选择符样式。
三 CSS常用属性
3.1 文本属性
文本属性 | |||
---|---|---|---|
序号 | 属性名 | 作用 | 说明 |
1 | font-size | 字体大小 | 单位是px,浏览器默认是16px,设计图常用字号是12px |
2 | font-family | 字体 | 当字体是中文字体、英文字体中有空格时,需加双引号;多个字体中间用逗号链接,先解析第1个字体,如果没有解析第2个字体,以此类推 |
3 | color | 颜色 | color:red; color:#ff0123(6位16进制数,两两一组,相同数字可省略); color:rgb(255,0,0); 0-255 |
4 | font-weight | 加粗 | 100 细体 ligter 400 正常 normal 700 加粗 bold 900 更粗体 bolder |
5 | font-style | 倾斜 | font-style:italic(斜体字)/oblique(倾斜的文字)/normal(常规显示); |
6 | text-align | 文本水平对齐 | text-align:left; 水平靠左 text-align:right;水平靠右 text-align:center;水平居中 text-align:justify;水平2端对齐,但是只对多行起作用。 |
7 | line-height | 行高 | line-height的数据=height的数据,可以实现单行文本垂直居中 |
8 | text-indent | 首行缩进 | text-indent可以取负值; text-indent属性只对第一行起作用;px、em(一个字符的长度) |
9 | letter-spacing/word-spacing(中文、英文) | 字间距 | 控制文字和文字之间的间距 |
10 | text-decoration | 文字修饰 | text-decoration:none没有/underline下划线/overline上划线/line-through删除线 |
11 | font | 文字简写 | font是font-style font-weight font-size / line-height font-family 的简写。 font:italic 800 30px/80px "宋体";顺序不能改变 ,只能省略斜体和加粗 |
12 | text-transform | 大小写转换 | capitalize单词首字母大写; lowercase全部小写; upcase全部大写; none无属性 |
常用字体
宋体SimSun 黑体SimHei
微软雅黑MicrosoftYaHei 微软正黑体 MicrosoftJhengHei
新宋体NSimSun 新细明体PMingLiU
细明体MingLiU 标楷体DFKai-SB
仿宋FangSong 楷体KaiTi
仿宋_GB2312FangSong_GB2312 楷体_GB2312KaiTi GB2312
3.2 列表属性
列表属性 | |||
---|---|---|---|
序号 | 属性名 | 作用 | 说明 |
1 | list-style-type | 定义列表符合样式 | list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉符号) |
2 | list-style-image | 将图片设置为列表符合样式 | list-style-image:url(); |
3 | list-style-position | 设置列表项标记的放置位置 | list-style-position:outside;列表的外面 默认值 list-style-position:inside;列表的里面 |
4 | list-style | 简写 | list-style:none; 去除列表符号,顺序不影响 |
3.3 背景属性
背景属性 | |||
---|---|---|---|
序号 | 属性名 | 作用 | 说明 |
1 | background-color | 背景颜色 | background-color:red;#ff0123;rgb(255,0,0);rgba(255,0,0,0) |
2 | background-image | 背景图片 | background-image:url(); |
3 | background-repeat | 背景图片的平铺 | background-repeat:no-repeat/repeat(默认)/repeat-x/repeat-y; |
4 | background-position | 背景图片的定位 | background-position:水平位置 垂直位置;可以给负值,默认在中间;如果是%则从左上角开始;也可以用left、center、right、top、bottom |
5 | background-attachment | 背景图片的固定 | background-attachment : scroll (滚动)/ fixed(固定,固定在浏览器窗口里面,固定之后就相对于浏览器窗口了) ; |
6 | background-size | 背景图片大小 | px;%;cover放大填充,可能丢失;contain等比例放大填充,可能留白 |
7 | background | 简写 | 前五个属性的综合,无顺序,省略的为默认值,会覆盖 |
rgba(255,0,0,0)
的a是透明效果,范围是0~1
fix要注意始终相对浏览器页面,要保证在盒子内,否则无法显示
top和bottom、left和right同时存在的时候,left、top优先级最高(无论class、style、import)
3.4 浮动属性
浮动属性 | ||
---|---|---|
序号 | 属性名 | 说明 |
1 | float:left; | 元素靠左边浮动 |
2 | float:right; | 元素靠右边浮动 |
3 | float:none; | 元素不浮动 |
作用 | 定义网页中其它文本如何环绕该元素显示; 让竖着的东西横着来 | |
清除浮动属性 | ||
序号 | 属性名 | 说明 |
1 | clear:none; | 允许有浮动对象 |
2 | clear:right/left; | 元素靠右边/左边浮动 |
3 | clear:both; | 元素不浮动 |
作用 | 解决高度塌陷问题,清除浮动只是改变元素的排列方式,该元素还是漂浮着,不占据文档位置。 |
浮动属性遵循见缝插针原则,文字会靠外显示
- 解决高度塌陷问题也可以通过规定高度解决,
height: 200px;
- 可以在下一个盒子上清除浮动
- 也可以再设置一个清除浮动的空盒子
<div style="clear: both;"></div>
- 引发bfc,让浮动元素计算高度,
overflow:hidden
四 盒子模型
4.1 盒子模型例图
4.2 margin
margin是外边距的意,
当一个元素样式属性里有margin:0 auto时,并且父元素的宽度是确定的,
意思是这个元素处于其父元素的居中位置,并且这个元素的上下外边距为0
即:上下外边距为0,左右自动,实际效果为左右居中
补充:
margin为外边距,及边框外到外部容器的距离,有四种参数设置方式:
margin:5px;/四边外边距都为5px/
margin:5px 10px;/上下外边距5px,左右外边距10px/
margin:5px 10px 15px;/上外边距5px,左右外边距10px,下外边距15px/
margin:5px 10px 15px 20px;/顺时针方向:上5px,右10px,下15px,左20px/
margin:0 auto;/上下外边距为0,左右自动,实际效果为左右居中/
HTML笔记——④css样式表、选择器、常用属性相关推荐
- Day03_css选择器、css样式大全、引入css样式表、常用标签属性、形变和动画
03.01_css选择器-属性选择器 针对中写明了某些属性的标签进行设置 选择器[属性名]{属性名称1:值1:属性名称2:值2:....}选择器[属性名="属性值"]{属性名称1: ...
- CSS 样式表大全(学习笔记)
简述: 此笔记是学习Qt开发时产生的,主要是对Qt组件样式设计学习的一个简单记录,仅供参考使用. css样式被称为为"层叠样式表",是一种网页制作做不可或缺的技术,是用于装饰网页, ...
- CSS——(CSS样式规则,CSS样式表单,选择器,常用的CSS属性)
CSS(Cascading Style Sheets,层叠样式表单)是由W3C所提出,主要的用途是控制网页的外观,也就是定义网页的编排,显示,格式化及特殊效果,有部分功能与HTML重叠. 1.CSS样 ...
- css样式表和选择器
CSS样式----图文详解:css样式表和选择器 主要内容 CSS概述 CSS和HTML结合的三种方式: 行内样式表 . 内嵌样式表 . 外部样式表 CSS四种基本选择器: 标签选择器 . 类选择器 ...
- 前端基础 CSS 第十一章 使用CSS样式表 特效属性部分 ----暑假学习第九天
第十一章 使用CSS样式表 11.8 定位属性 使用定位属性可以控制元素的位置,包括相对定位和绝对定位两种方式.相对定位指允许元素在相对于文档布局的原始位置上进行偏移,而绝对定位是指允许元素与原始文档 ...
- 【CSS】学习笔记1 使用CSS样式表
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Qt学习笔记之样式表
一.概述 Qt的样式表是从Qt4.2开始引入的描述窗口部件外观的机制,类似于HTML的层叠样式表(Cascading Style Sheets,CSS).样式表在Qt的风格之上起作用(如果使用了样式表 ...
- css网站样式表是什么,什么是css样式表
css样式表指的是层叠样式表(Cascading Style Sheets),简称CSS,是一种用来表现HTML或XML等文件样式的计算机语言,是用来表示html样式的一种编程语言,是可以做到网页和内 ...
- 在html中加入外部css样式,如何引入CSS样式表?
CSS用于修饰网页样式,但是,如果希望CSS修饰的样式起作用,就必须在html档中引入CSS样式表.引入样式表的常用方式有三种,即行内式.内嵌式.外链式,具体介绍如下. 1.行内式 行内式也称内联样式 ...
最新文章
- Android手机指令操作释疑
- android 高级画布绘图
- pycharm python3区别_1.安装Python3和PyCharm
- element ui 组件踩坑记录--后台管理系统-最全
- 关于ECMAScript6 的学习01-ES6 的六种变量声明方式===关于常量const
- 重做 oracle_Oracle数据库基本知识(1)-数据库(1)
- ConcurrentHashMap1.7到1.8变化
- cad图纸服务器共享文件慢,DWG文件打开慢?3个技巧教你实现快速预览!
- 基于51单片机的教室人数检测
- C++ + win32 + STL 写的QQ连连看外挂
- 银行IT系统-整体架构
- win10修复计算机选项,为你win10系统设置启动时按F10出现修复计算机选项的技巧...
- 快速文本分类(FastText)
- 解决阿里云不能使用yum问题
- java 里大于且小于_java-浮点数大于或小于零
- java阿里云文本反垃圾sdk调用详解
- Global Illumination_Screen-Space Directional Occlusion(SSDO)
- Systemback更改默认存储目录/home,并在Ubuntu18创建大于4G的Linux镜像教程
- 如何给App快速搭建虚拟服务器
- 《土地公婆》钟久夫邓天晴演绎梁祝爱情