css样式

TOP↑

引入方式

　　1.行内样式:直接在标签内部声明样式,不应该大量使用

<p style="color: red">Hello world.</p>

　　2.内部样式:嵌入式,集中写在网页头部的style标签内

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

　　3.外部样式:写在单独文件里,通过在页面中的link标签引入

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

选择器

　　基本选择器

　　　　1.元素选择器:　
p {color: "red";}
　　　　2.ID选择器:
#i1 {
  background-color: red;
}
　　　　3.类选择器:
.c1 {
  font-size: 14px;
}
p.c1 {
  color: red;
}
　　　　4.通用选择器:
* {
  color: white;
}

　　组合选择器

　　　　1.后代选择器:
/*li内部的a标签设置字体颜色*/
li a {
  color: green;
}
　　　　2.儿子选择器:
/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {
  font-family: "Arial Black", arial-black, cursive;
}
　　　　3.毗邻选择器:
/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {
  margin: 5px;
}
　　　　4.弟弟选择器:
/*i1后面所有的兄弟p标签*/
#i1~p {
  border: 2px solid royalblue;
}

　　属性选择器

/*用于选取带有指定属性的元素。*/
p[title] {
  color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
  color: green;
}

 

/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
  color: red;
}

/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
  color: red;
}

/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
  color: green;
}
不那么常用的属性选择器

 

r3

posted @ 2018-09-04 15:01  最后一个老实人  阅读(256)  评论(0)    收藏  举报
W3School 在线教程