11.23

css引入

1.行间样式    style属性   

优点:直接写在标签内,对该标签生效

缺点:内容和样式没有分离,代码阅读性比较差,样式不能复用

2.内部引入    style标签     

优点:样式可以复用,样式和内容分离,提高代码阅读性

缺点:代码并没有完全复用

3.外部引入     引入css文件

优点:可以让样式在不同的html文件中得到复用,也让内容和样式得到分离

缺点:外部引入会让网页在加载的过程中发送一次额外的请求

选择器

统配选择器  *  对所有的标签生效

类选择器:.class{}  1.标签里面添加class属性 class=“test”

2.在style里面写.test{}给所有的类名为test的标签添加属性

3.一个标签可以有多个类名(类名之间用空格隔开),一个类名可以被多个标签使用

id选择器:#id{}   1.在标签里面添加id属性 id=“test”

2.在style里面写#test{}给id为test的标签添加属性

3.一个标签一般只有一个id,一个id能被一个标签使用

标签选择器:使用标签名{}给所有这个名字的标签添加样式,范围很大。一般用于重置标签的默认样式

后代选择器:是一个结构,子父(父父)级的结构,子级在后,样式作用域最后一个子级

群组选择器:样式会作用于多个选择器,代表每一个用逗号隔开的选择器都会拥有这种样式

优先级问题

只有当两个选择器里面的样式出现冲突之后才会产生优先级的概念

样式不冲突的时候每一个选择器里面的样式都会生效

优先级可以以权值来计算{

*          0;

标签选择器     1;

类选择器       10;

id选择器        100;

style行间样式   1000;

!important      10000;

后代选择器   会先去查找后代选择器里面权值最高的选择器,然后看个数来比较

}

边框

边框颜色 border-color;默认和字体颜色一样

边框粗细 border-width;默认3px;

边框形状 border-style;没有默认值,是边框的必要属性 solid 实线    dashed 虚线    dotted  点状线

给元素添加边框之后,整个元素大小会发生变化

边框的属性都可以分为四个方向来写border-(方向)-(属性)

圆角效果

外边距(margin)

可以设置负数

left.top一般会让自身位置发生变化,bottom和right一般会让下方和右侧的元素位置发生变化

在使用margin-top的时候,如果父级没有边框,会把父级带下来

解决方法:给带有margin-top的元素的父级添加边框

margin的复合写法

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,294评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,493评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,790评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,595评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,718评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,906评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,053评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,797评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,250评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,388评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,018评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2 350

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,633评论 18 139
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1 92
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,033评论 0 1
  • 和朋友的孩子约好下午5点一起去看《神偷奶爸3》,我们大人则去看了《冈仁波齐》,孩子们看完先回家自己玩去了。朋...
    何金霖阅读 149评论 0 0
  • 第一篇:小时候,我有一个梦想 我出生在一个十分偏远的小县城,我的爸爸妈妈是60年代的大学生,那时被下放到县城。孩童...
    若妈阅读 769评论 1 2