CSS整理1

CSS

分为两大部分, 一个是CSS的属性, 另一个是CSS选择器

常见的

文字属性   
font-style    样式
normal :普通
italic : 倾斜

font-weight     粗细
lighter 细线, 默认 
bold: 加粗
bolder: 更粗
数字取值:100-900之间

font-size     文字大小

取值: px(像素 pixel)


font-family     文字字体

font-family:"楷体";

默认宋体

设置备选

:font-family:"字体1", "备选方案1"   中文字体包括英文  ,英文不包括中文   英文字体放在前面 (中文字体也有自己的英文名)

企业开发中最常见的字体

中文宋体/黑体/微软雅黑  ,英文: "Times New Roman"/Arial

宋体 SimSun  黑体 SimHei  微软雅黑 Microsoft YaHei




文字缩写

font: style weight size family;

style 、weight可以省略


文本属性

text-decoration    文本添加装饰 

nong: 取消线

underline: 加下划线

line-through: 加删除线

overline: 加上划线


text-align   水平对齐

取值:   left  right  center


text-indent 文本缩进

取值: em   2em表示两个汉字)


颜色属性
rgb代表三原色, 其中r(red 红色) g(green 绿色) b(blue 蓝色)
rgb(0,0,0)  每个数字由三个光原件组成
取值是0-255之前, 0代表不发光, 255代表发光
红色: rgb(255,0,0);
绿色: rgb(0,255,0);
蓝色: rgb(0,0,255);
黑色: rgb(0,0,0);
白色: rgb(255,255,255);
灰色: rgb(200,200,200);
只要让红色/绿色/蓝色的值都一样就是灰色

rgba  a代表透明度, 取值是0-1,越小越透明

十六进制 本质就是RGB   取值0-F, 逢十六进一

 #FFEE00 FF表示R EE表示G 00表示B。   两位一样可简写#FE0 


CSS选择器
#标签     (id选择器

.biao'qi      (类选择器)

标签       (标签选择器)

选择器1  选择器2      (后代选择器 )

选择器1>选择器2      (子元素选择器)

选择器1选择器2      (后代选择器 

选择器1+选择器2     相邻兄弟选择器)

选择器1~选择器2   (通用兄弟选择器)

*           (通配符选择器)

序选择器

:first-child                 同级别第一个标签    
:last-child                 同级别最后一个标签
:nth-child(n)             同级别第n个标签
:nth-last-child(n)       同级别倒数第n个标签
:only-child                 父元素唯一的标签
:first-of-type             同级别第一个类型标签  
:last-of-type             同级别最后一个类型标签
:nth-of-type(n)          同级别第n个类型标签
:nth-last-of-type       同级别倒数第n个类型标签
:only-of-type            父元素唯一的类型标签
:nth-child()                odd 同级别所有奇数       even同级别中的所有偶数     xn+y  x和y是自定义的, n是计数器, 从0开始递增

:nth-of-type()                


属性选择器

[attribute]         

[attribute=value]     属性值的匹配

[attribute^=value]   属性值以value开头

[attribute$=value]   属性值以value结尾

[attribute*=value]   属性值包含value



CSS三大特性

继承性 、层叠性、 优先级

继承性

父元素设置的属性 被子元素获得

只有以color/font-/text-/line-开头的属性才可以继承,后代都可以继承

a标签的文字颜色和下划线是不能继承的  ,h标签的文字大小是不能继承的

应用场景: body一般用于设置网页上的一些共性信息, 例如网页的文字颜色, 字体,文字大小等内容

层叠性

多个选择器选中"同一个标签", 又设置了"相同的属性

优先级

解决层叠性的属性设置,排列优先级。

三种方式

通过继承性设置:    谁离目标标签比较近就听谁的

相同选择器(直接选中)   同类型的选择器,  谁写在后面就听谁的

不同选择器(直接选中):   id>>标签>通配符>继承>浏览器默认 

注意点:   通配符选择器也是直接选中


优先级权重
数选择器的类型 ,大的 优先级最高  , 一样大数个数, 数量多的优先级高

注意点: 直接选中标签的才需要计算权重, 否则一定会听直接选中的

!important

写在要提升属性的后面,将被指定的属性的优先级为最高 



Div标签

配合CSS网页布

会单独的占领一行

span标签

配合css设置局部信息
不会单独占领一行

HTML将所有的标签分为两类, 容器级和文本级

容器级可以嵌套所有的标签,文本级只能嵌套文字/图片/超链接

容器级 div h ul ol dl li dt dd ..

文本级:span p buis strong em ins del ...

CSS将所有的标签分为两类, 块级元素和行内元素(其实还有一类, 行内块级)

常见块级元素p div h ul ol dl li dt dd     会独占一行

 可以设置宽高, 如果没设置, 跟父元素一样宽   

常见行内元素: span buis strong em ins del   不会独占一行

 不可以设置宽高, 如果没设置, 跟内容一样宽

行内块级元素:img  不独占一行 又可以设置宽度和高度

display属性  模块转换

display: block   转成块级
display: inline   转成行内

display: nline-block  转成行内块级







本内容收集与网络,部分转载极客江南,并将内容提炼整理。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值