用户工具


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标签无效–

      >


  • 页面工具