0
点赞
收藏
分享

微信扫一扫

CSS基础简单学习记录

朱小落 2022-02-12 阅读 112

一.css简介

css是层叠样式表 ,可以用来修饰网页。

二.引入方法

css有三种引入方式

1.用行内样式(行内样式/嵌入样式)

就是在标签内引入,<标签 style="width:100px; height:100px;"> </标签>

2.内部样式

①首先body里面要有元素标签

②然后在head里面创建<style style="type=text/css"></style>

③在type里面修饰过程,对相应的标签 进行修饰

选择器(选择符){属性:属性值}

3.外部样式

用link引入,<link rel="stylesheet" style="text/css">

通过import把html和css进行连接,格式<style>@import url();</style>

Link引入和import的区别:

①Link是html的语法,而import是css的语法

②link在页面加载的时候是html结构和css样式一起加载的,import在页面加载的时候是先加载html结构,在加载css样式。import在网速比较慢的情况下会出现闪烁问题。

③link没有兼容问题,而import在IE5以下不兼容。

当修饰样式的时候,同一个标签有多个样式时,会发生冲突

冲突之后的解析规则:

规则1:权重相同的时候,采用就近原则,即谁的css样式离标签就解析谁的

规则2:权重不同的时候,权重高的覆盖权重低的

权重占比大小:

行内样式的(1000)> id选择器(100)> class选择器(10) > 标签选择器(1) > 通配符选择器*(0)>  自带样式 > 继承样式

选择器:

①基本选择器②层次选择器③伪类选择器④伪对象选择器⑤属性选择器

基本选择器就是类型选择器(标签选择器)

可以用class和id进行区分

class语法是:.box{}

id语法是:#box{}

id的属性只能是一个

css相关选择器:

①基本选择器

通配符 *{margin: 0;padding: 0}清除所有标签自带的内外间距。

群组选择器  可以简化代码,对代码进行优化

②层次选择器

包含结构的  有后代选择器(包含选择器);还有子选择器

并列结构的   有相邻兄弟选择器和通用兄弟选择器

css相关属性:

文字大小 font-size 浏览器默认字体大小是16  谷歌最小解析是12

文字颜色  color

字体 font-family

字体加粗   font-weight:bold;

                  font-weight:bolde;

                  font-weight:600-900;

字体不加粗   font-weight:normal;

                     font-weight:400-500;

倾斜 font-style:italic;font-style:oblique;

不倾斜  font-style:normal;

水平对齐方式   text-align:left/right/center/justify;

text-align:justify;只对多行实现两端对齐;

text-align-last:justify;实现单行的时候也可以两端对齐,如果是多行,就只有最后一行两端对齐。

后续再追加...

举报

相关推荐

CSS基础记录

css学习记录

Css简单学习

初学html,css的简单记录

HTML简单学习记录

汇编学习记录-简单总结

JavaScript基础学习记录

nginx基础学习记录

css基础学习1

0 条评论