在上海乐字节学习的第五天(持续更新中)

一、选择符的权重
选择符的权重:id>class>标签。
如果用数字代表权重:
内联样式表 1000;
id 100;
class 10;
标签 1;
伪类选择符 10;
通配符 0;
其中,包含选择符的权重为权重之和,例

box div{} 权重为100+1=101;

.warp .con p{} 权重为10+10+1=21
群组选择符的权重是不会变化的,保持原来的权重值。
注:!important的权重是最高的。
二、CSS的层叠性
CSS的层叠性是因为产生了权重关系。
1.!important是最重要的样式,权重级别最大。
2.内联样式表>内部/外部。
其中,内部和外部样式表的权重一样,但是后面写的会把前面写的覆盖掉。
3.选择符的权重:id>class/伪类>标签。

  1. 开发者样式权重 > 读者(用户)样式 > 浏览器样式。
  2. 当权重相同的时候,后写的样式会被前写的样式覆盖掉。
    三、CSS的语法
    1.CSS的语法为 选择符{属性:属性值;}
    CSS常用的属性有:width\height\background\color\border…
    2.CSS的属性值分为常规属性值和法定属性值。常规属性值即100px\200px\300px…;法定属性值即官方指定的单词,具有某种意义。
    四、CSS的文本属性
    1.font-size:; 控制文本大小
    a.为了消除系统之间显示差异,规定:16px 为标准字体大小;
    b.文本大小设置,设置为偶数;
    c.PC端项目,设置最小尽量别低于12px ;
    d.从ps中获取文本大小,汉字量取文本高度。
    e.文本单位:px \ em \ pt(磅)【常用在印刷领域】
    12px == 9pt
    em
    ( 相对大小单位,相对于父元素的font-size值而定 )
    (默认情况下, 1em == 16px)
    f.以下内容作为了解:
    xx-small =9px
    x-small =11px
    small =13px
    medium =16px
    large =19px
    x-large =23px
    xx-large =27px
    2.color:; 控制文本中的颜色
    颜色值:
    a:十六进制表示颜色值:
    16进制数字:0 - 9 ,a - f
    颜色值: #ff0000
    6个数字:
    前两位 红色
    中间两位 绿色
    最后两位 蓝色
    b: RGB(255,0,0) 模式
    拓展: rgba(255,0,0,0.5);,其中最后一位是透明度,0为全透明,1为不透明。
  3. font-family:;控制的是网页中字体类型。
    默认的字体类型:“微软雅黑”
    系统能支持的字体:web安全字体:微软雅黑、宋体、楷体…
    英文默认的字体:Arial
    语法:
    font-family:字体1,字体2,字体3,…
    注:
    a:中文字体必须放在引号里面
    b:如果一个字体多个单词组成 也要放在引号里面
    c:如果字体是一个单词 不需要引号。
    d:先写英文字体,后写中文字体。
    4.font-weight:;控制文本是否加粗
    属性值:
    bold 加粗
    bolder 加粗
    normal 清除加粗,恢复常规文本
    100 - 900
    100 - 500:不加粗
    600 - 900:加粗的状态
    一般如果使用常规属性值,常用的是100.
  4. font-style:;控制文本的倾斜
    属性值:
    italic 倾斜
    oblique 倾斜(倾斜幅度更大,但是一般不会有明显变化)
    normal 恢复常规文本
    6:line-height:; 控制文本的行高。
    a: 从ps设计图上:怎么获取行高?
    从第一行开始量到第二行开始。
    b:单行文本:
    如果让单行文本在容器里面上下居中,line-height设置容器高度即可
    显示状态:
    小于容器高度的时候:文本往上移动
    大于容器高度的时候:文本往下移动
    7.text-align:; 控制文本的水平对齐方式
    属性值:
    center 居中对齐
    left 左对齐
    right 右对齐
    justify 两端对齐
    8.text-decoration:; 文本修饰(下划线、上划线、删除线)
    属性值:
    None 清除下划线
    Underline 添加下划线
    overline 添加上划线
    line-through 添加删除线
  5. text-indent:; 缩进
    text-indent:2em;首行缩进:
    text-indent能设置负值:文字往左走。(悬挂式缩进)
    10.字间距、词间距
    letter-spacing:; 字间距
    word-spacing:; 词间距
    11:.text-transform:; 控制文本大小写。
    属性值:
    uppercase 大写
    lowercase 小写
    capitalize 每个单词的首字母大写
    五、浮动
    属性:float
    属性值:left
    right
    none
    特点:
    a.添加浮动之后,元素是不占据空间。
    b.如果让多个元素横向进行排列,所有的排列的元素,都必须添加浮动。
    c.如果子元素添加浮动,宽度大于父元素的时候,后面的元素被挤到下一行
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,204评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,091评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,548评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,657评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,689评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,554评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,302评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,216评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,661评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,851评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,977评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,697评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,306评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,898评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,019评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,138评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,927评论 2 355