url知识补充,CSS基本内容,常用的CSS属性,RGB颜色空间,文本属性,字体属性,CSS选择器
URL知识补充
- 访问网络资源的过程:通过DNS进行域名解析成ip地址在去服务器进行请求
- URL(Uniform Resource Locator统一资源定位符):资源的地址位置,通过url能找到网络上的唯一资源
- url具体的文件格式:
==protocol://hostname[:port]/path/[;paramenters][?query]#fragment==
http://www.baidu.com:80/s?wd=io#page
参数:page:当前要访问的页面
type:访问数据的类型(pop,new,sell)- port:端口:一台有ip地址的主机提供多个服务,web服务,FTP服务,SMTP服务
- 主机通过ip地址+端口来区分不同的服务,端口范围从0-65535,http默认端口80,ftp默认端口21
- query:请求参数,提交给服务器
- fragment:锚点位置
- 标签语义化的原则:正确的使用标签
CSS基础
官网文档的查阅网址:
https://developer.mozilla.org/zh-CN/docs/Web/CSS 查询css相关用法
https://caniuse.com/ 查询兼容性问题
- css:Cascading Style Sheets层叠样式表
- CSS三种应用方式
- 内联样式(inline style)
- 文档样式表(documnt style sheet),内嵌样式(embed style sheet)
- 外部样式表(extenal style sheet)
css最好也指定样式,css一般都在后面加分号
@charset “utf-8”;
- 引入外部样式表的两种方式:
- link引入样式表:
- style->@import
当引入多个样式时,将最重要的放在最后,也可以将base的样式放在重要的样式表里
==import效率没有link高,一般不用,在框架使用中会使用import==
CSS选择器
- CSS选择器
按照一定的规则选出符合条件的元素,为之添加CSS样式选择器的种类繁多 - 归类
- 通用选择器(universal selector)一般不建议使用
- 元素选择器(type selectors)
- 类选择器(class selectors):”.+类名”
- id选择器(id selectors)”#+id名”
==#+id名 .+类名== - 属性选择器(attribute selectors)
- 组合(combinators)
- 伪类(pseudo-classes)
- 伪元素(pseudo-elements)
==一个元素可以有多个选择器,通过空格进行连接==
- 设置网页图标
- link元素的rel属性不能省略,用来指定文档链接和链接资源的关系
- 一般rel指定,type属性也会默认确定,可省略
- 网页图标支持格式:ico,png,常用大小1616,2424,32*32
结构和样式分离
- 开发中用css控制的不要用属性去控制
- css样式和html文件分开存放
最常用的CSS属性
- 非替换行内元素设置高度等某些属性是没有效的例如span等
- 调试网页代码时给div添加outline属性可以帮助调试
- 强调符的应用
RGB颜色空间
- rgb:
- red:0-255
- green:0-255
- blue:0-255
- 1byte->8bit->11111111->255
- rgba:
- red
- green
- blue
- alpha:0-1(0:完全透明 1:完全不透明)
- 十六进制)(#00ffaa,简写#0fa)开发中推荐使用
- transparent(表示rgb全部都是0
)呈现黑色全透明
文本属性
text-decoration:设置文字的装饰
- none:无装饰下你,可以去除a元素默认的下划线
- underline:下划线
- overline:上划线
- line-through:中划线(删除线)
(u,ins元素默认设置了下划线)
letter-spacing字母间距
word-spacing:单词之间的间距
text-transform:设置文本的大小写转换
- capitalize(将每个单词的首字母变为大写)
- uppercase:所有字母变为大写
- lowercase:所有字母变为小写
- none:没有任何影响
text-indent:设置第一行内容的缩进,谷歌中单个字符为16px,首行缩进2个字符可以直接通过em进行设置(1em=1个字符),em单位是一个相对单位,相对于自身元素;rem设置字体相对于根元素设置,常用移动端用于适配
text-align:设置元素内容在水平对齐方式
font-size
- em:相对于父元素
- px
- rem
- 百分比:相对于父元素进行百分比设置,谷歌浏览器默认最小字体12px
==文本相关的属性会继承父元素的属性设置==
font-famliy:设置字体格式,一般在设置字体格式都设置多个字体格式,避免操作系统不存在这种字体(按照从左到右选择字体),英文字体只适用英文,中文字体都支持.一般开发中中文字体写前面,中文字体写在后面
font-style:设置文字的常规,斜体显示
- normal:常规显示
- italic:用常规的斜体显示(前提是font-family这种字体时支持斜体的)
- oblique:文本倾斜显示(让文字倾斜)
- italic和oblique的区别是:不能用italic倾斜的字体可以通过oblique显示倾斜
- em,i,cite,address,var,dfn等元素的font-style默认的就是italic
font-weight:设置字体的粗细
- 每一个字体表示一个重量(100-900)
- normal:=400
- bold:=700
strong,b,h1-h6等标签的font-weight默认就是bold
font-variant:可以影响小写字母的显示形式
- normal:常规显示
- small-caps:将小写字母替换为缩小过的大写字母
line-height:用于设置文本的最小行高=两基线之间的距离=行距+字体高度;解决字体垂直居中的解决方案:height=line-height
- 当有文本的时候可以直接去掉height,通过设置line-height使文字垂直居中显示
font属性缩写:font-style font-variant font-weight font-size/line-height font-family
- font-style,font-variant,font-weight可以随意调换顺序,可省略
- line-height可以省略如果不省略必须跟在font-size之后
- font-size,font-family不可以调换顺序
CSS更多选择器
- 类选择器
- id选择器
- 元素选择器
- 通配选择器
- 属性选择器(attribute selector)
- 拥有title属性的选择器格式:[title]
- title属性值恰好等于one的元素: [title=”one”]
- title属性值包含one的元素 :[title*=”one”]
- title属性值以单词one开头的元素: [title^=”one”]
- title属性值恰好等于one的或者以单词one开头的且后面紧跟连字符的元素:[title|=”one”]
- title属性值包含单词one的元素(与其他单词必须用空格分开):[title~=”one”]
- title属性值以单词one结尾的:[title$=”one”]
- 后代选择器(descendent conbinator)
- div里面的span元素(包含子元素和直接子元素)格式:div span
- 子代选择器(child combinators
- div元素里面的直接子元素 格式:div>span或者div > span
ps:
==类下面,标签下面都可以使用选择器==
p元素下不能直接跟div元素
- 相邻兄弟选择器(adjacent sibling combinator)
- div元素后面紧挨着的p元素(且div,p是兄弟关系)格式:div+p
- 全体兄弟选择器:div==后面==的p元素(且div,p是兄弟关系)格式 :div~p
- 选择器组
- 交集选择器:同时符合两个条件div元素,class值有one.格式:div.one
- 并集选择器:所有的div元素 + 所有class值有one的元素 + 所有title属性值等于test的元素.格式:div, .one, [title=”word”]
本文链接: https://sparkparis.github.io/2020/03/24/HTML-%E7%AC%94%E8%AE%B02/
版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!