CSS样式 CSS选择器(Cascading Style Sheet)

颜色设置

#rrggbb 例如:#ff00ff
#rgb 例如:#f0f,等价于#ff00ff
rgb(x,x,x) 例如:rgb(112,112,112) 数值为0-255的整数值
rgb(x%,x%,x%) 例如:rgb(20%,50%,44%) 数值为0-100的整数值

指定URL方式

body {background-image:url(qq.png)};
body {background-image:url(www.baidu.com/qq.png)};
body {background-image:url('qq.png')};
body {background-image:url("qq.png")};

CSS嵌入HTML方式

1、内联(行内)

例如:<p style="color:red; font-size:20px;">内嵌</p>

2、内嵌(内部式)

CSS样式写在<head></head>中间

例如:

<head>
   <style type="text/css">
   p {color:red; font-size:20px;}
   </style>
</head>
<body>
   <p>内嵌</p>
</body>```
  
###3、外部(外联)
>CSS样式写在单独的.css文件中,在HTML中引入.css文件

例如:
- .css文件中写如下内容
`` p {color:red; font-size:20px;}``

- .html文件中<head></head>中引入
``<link rel="stylesheet" type="text/css" href="mystyle.css">``

---
>HTML中CSS的样式优先级:就近原则

---

#CSS选择器(选择符)
###1、HTML选择符
>将HTML标签名作为选择符名

例如:

body {background-color:#ddd}
h1 {color:red}```

2、类选择符(class选择符)

用 . 开头写的样式,通过 class 属性使用,同一标签可以有多个class选择器。

例如:

//设置
h2.css1 {color:red}//有名类选择符
.css2 {color:blue}//匿名类选择符
//使用
<h2 class="css1">h2标签中的css1样式</h2>
<h3 class="css2">h3标签中的css2样式</h3>```

###3、ID选择符
>用 # 开头写的样式,使用 id 属性使用每个标签最多只能有一个ID选择器。

例如:

//设置

id1 {color:yellow; background-image:url(ss.jpg)}

//使用
<h3 id="id1">h3标签使用了id1的ID选择器</h3>


###4、关联选择符
>大样式中的子样式设置,用空格分开。

//设置
ul a {color:red} //ul 中的 a 标签使用这个样式
.css1 a {color:blue} //css1类选择器中的a标签使用这个样式

###5、组合选择符
>用 ,分开,表示声明的标签都是用此样式

//设置
h1,h2,h3 {color:red}

###6、伪元素选择符
>一个标签在不同状态下的设置

//设置
a:link {color:#ff0000; text-decoration:none}//未访问的链接
a:visited {color:#00ff00; text-decoration:none}//已访问
a:hover {color:#ff00ff; text-decoration:underline}//鼠标停留在链接上
a:active {color:#0000ff; text-decoration:underline}//点击链接

* 注:
 -a:hover 必须放在a:link a:visited 之后才有效果
 -a:active 必须放在a:hover 之后才有效果


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

推荐阅读更多精彩内容

  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,552评论 32 459
  • 最近在看html基础,好吧,写点笔记,比较low见谅,反正我自己看懂就行了 CSS基础 1、css简介 casca...
    小龙是只猫阅读 593评论 0 1
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,079评论 0 40
  • FreeCodeCamp - HTML5 and CSS 发现原来在另外一台电脑学 FreeCodeCamp 的时...
    付林恒阅读 9,368评论 2 17
  • 已完成事项: 1.英语视频unit27; 2.TED演讲视频-连续100天被拒是种什么体验? 3.数学视频2段; ...
    逸馨儿阅读 87评论 0 0