html:css样式

目录

css 引入方式
css样式
基本样式
类选择符
id选择符
属性名选择符
属性值选择符
伪类
伪元素

css 引入方式

定义在标签内<p style=“color: #DDDDDD;”>fang</p>
定义在<head><style></style></head>
在文档头引入<link href=“styles.css” rel=“stylesheet” type=“text/css” />

css样式

基本样式

p {color:red;}
h1, h2, h3 {color:red;}<!– #同时设置h1h2h3 –>
article p {color:blue;}<!– 当article是p的祖先时–>
span > h1{color:blueviolet;} <!– #当span是h1的父元素时 –>
h2 + p {color:red;}<!– #当p的前一个元素是h2时（必须是前一个） –>
h2 ~ a {color:red;} <!– #当p标签前有h2时（不一定是前一个） –>
h2 * {color:blue;} <!– #h2的所有子标签 –>
.specialtext {font-style:italic;}

类选择符

.fang{color:blue} # 类选择符
.qiang{font-size:420%;} # 类选择符
.fang.qiang{background: red} # 对同时选择 fang qiang的类生效
p.fang{background: yellow} # 对使用fang类的p标签生效

id选择符

示例：#.aaa{color:blue}
id选择符，跟类选择符用法一样
id选择符并多了一个页面内跳转的功能
id选择符自能使用一次，类选择符可以被多次使用

属性名选择符

标签名[属性名]
img[title] {border:2px solid blue;}

属性值选择符

标签名[属性名=“属性值”]
img[title=“red flower”] {border:4px solid green;}

伪类

a:link {color:black;} 链接就在那儿等着用户点击
a:visited {color:gray;} 用户此前点击过这个链接。
a:hover {text-decoration:none;} 鼠标指针正悬停在链接上。
a:active {color:red;} 链接正在被点击(鼠标在元素上按下,还没有释放)
p:focus{color:red;} # 当p标签获得焦点时出发，focus能被所有标签使用
#tar:target {background:#000;} #当页内跳转时，跳转到的地方背景变成黑色<a href=“#tar”

>to tar</a>

=

􏳥􏳦􏳧􏱂􏳨􏳥􏳦􏳧􏱂􏳨结构化伪类

li:first-child {color:blue;} # li标签的第一个元素 li:nth-child(2) {color:blue;}# li标签的第二个元素 li:last-child {color:blue;} # li标签的最后第一个元素 </code>

伪元素

p.age::before {content:“Age: ”;}
p.age::after {content:“ years.”;}
- <p class=“age”
  
  >25</p>
  - 结果：Age: 25 years.
  - p::first-letter {font-size:300%;} 段落首字符加大
  - p::first-line{font-size:300%;} 段落首行字体加大
  =

html引用样式

<p class=“fang qiang”

>fang</p> # 同时选择多个类，空格分开

<a href=“#aaa”>to tar</a> 页面内跳转，跳转到aaa 标签
- <p id=“aaa”>fang</p>
<a href=“#”>to tar</a> 页面内跳转，return to top

==== 其他说明 ====

<!– p标签中不能嵌套h1,如果嵌套则p标签无效–

>