CSS学习

CSS学习

一、CSS代码

/*
选择器 {属性:值;属性:值;}
子元素从父元素继承属性
 */

/*
id选择器优先级大于类选择器
相同的话，如定义两次id选择器green，后定义的优先
标签内>style>css
 */

/*元素选择器 body*/
body {
    color: #000;
    background: #fff;
    margin: 0;
    padding: 0;
    font-family: Georgia, Palatino, serif;
}

h1,h2,h3,h4,h5,h6 {
    color: green;
}

/*派生选择器 即后代选择器  列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器*/
li strong {
    font-style: italic;
    font-weight: normal;
}

/* id选择器 以#来定义，只能使用一次，对应某个id*/
#red {color:red;}
#green {color:green;}
#green {color:blue;}

/*使用id选择器来定义派生选择器 在id为sidebar的标签内的所有 p 和 h2标签，按照下面规则定义*/
#sidebar p {
    color: red;
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
}
#sidebar h2 {
    font-size: 1em;
    font-weight: normal;
    font-style: italic;
    margin: 0;
    line-height: 1.5;
    text-align: right;
}

/*类选择器 以.来定义，在class="类名"的标签内生效，可以使用多次*/
.center {text-align: center}

/* 类选择器也可用作派生选择器 类名为class标签内的所有标签，使用class定义的样式*/
/* 只会应用于表格的列*/
.fancy td {
    color: #f60;
    background: #666;
}
/*元素也可以基于它们的类而被选择 上面的是祖先类使用class，作用在子标签的td；下面的是自己使用class作用在自己*/
td.nancy {
    color:red;
    background: #666;
}

/*属性选择器*/
/* 为拥有指定属性的 HTML 元素设置样式*/
/*下面的例子为带有 title 属性的所有元素设置样式*/
[title]
{
    color:red;
}

/*属性和值选择器*/
/*下面的例子为 title="W3School" 的所有元素设置样式*/
[title=W3School]
{
    border:5px solid blue;
}

/*属性和值选择器 - 多个值 */
/*下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：*/
[title~=hello] { color:red; }

/*下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值*/
[lang|=en] { color:red; }

/*设置表单的样式 属性选择器在为不带有 class 或 id 的表单设置样式时特别有用*/
/* input代表标签名 type代表属性名 text为属性值*/
input[type="text"]
{
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:yellow;
    font-family: Verdana, Arial, serif;
}

input[type="button"]
{
    width:120px;
    margin-left:35px;
    display:block;
    font-family: Verdana, Arial, serif;
}
/* 类选择器 id选择器
最前面的标签名代表可以使用该类作为类属性值的标签，如p,table的class可以设为blue。 没有或者*代表所有标签都可应用
.代表类选择器 #代表id选择器
blue代表类名
后面的标签名代表css应用在哪些标签中 没有或*代表所有都应用
*/
p.blue
{
    color: blue;
}
table.blue th /*只应用在table的类名为blue，且子孙中的th标签上*/
{
    color: blue;
}

table#aqua th
{
    color: aqua;
}

/*
属性选择器： 标签名[属性][属性]
标签名为所作用的标签，空或者*代表所有。属性名代表只有具有该属性的标签才会被作用（两个属性同时具有）
*/
a[href][title]  /*选取带有href title属性的a标签 */
{
    color: red;
}

a[href="www.baidu.com"][title="baidu"]  /* 选取href属性值为www.baidu.com且title属性值为baidu的a标签 */
{
    color: #ff6600;
}

/* 后代选择器 包含选择器*/
h1 em {color:red;} /* 作为 h1 元素后代的任何 em 元素变为红色*/
div.sidebar a:link {color:white;}

/* 子元素选择器 只选择某个元素的子元素*/
h1 > strong {color:red;} /*h1只有孩子元素被选中*/
table.company td > p  /*td的子p标签*/
{
    color: antiquewhite;
}

/*
 相邻兄弟选择器
 选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器
*/
h1 + p {color:red} /*选择h1后第一个出现的p*/
html > body table + ul {margin-top:20px;} /*选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。*/

/* 伪类  用于向某些选择器添加特殊的效果*/
/*伪类的语法 selector : pseudo-class {property: value}*/
/* CSS 类也可与伪类搭配使用 selector.class : pseudo-class {property: value} 即只作用在特定类*/
a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

/*:first-child 伪类来选择元素的第一个子元素*/
p:first-child {font-weight: bold;}  /*即匹配作为某个元素子元素第一个出现的p标签*/
li:first-child {text-transform:uppercase;} /*匹配第一个出现的li标签*/
p > i:first-child {  /*选择器匹配所有 <p> 元素中的第一个 <i> 元素*/
    font-weight:bold;
}

/*匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素*/
p:first-child i {
    color:blue;
}

/*伪元素 CSS 伪元素用于向某些选择器设置特殊效果*/
/* 语法 selector:pseudo-element {property:value;}*/
/* selector.class:pseudo-element {property:value;}  只作用在特定类*/

/* "first-line" 伪元素用于向文本的首行设置特殊样式*/
p:first-line /* p 元素的第一行文本进行格式化*/
{
    color:#ff0000;
    font-variant:small-caps;
}

/* "first-letter" 伪元素用于向文本的首字母设置特殊样式 */
p:first-letter
{
    color:#ff0000;
    font-size:xx-large;
}

/* ":before" 伪元素可以在元素的内容前面插入新内容  ":after" 伪元素可以在元素的内容之后插入新内容*/
h1:before
{
    content: url("../pictures/hao.jpg");
}

/* 多类选择器 */
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;} /*既是important又是warning 只要class的属性值中包括important warning两个单词就行 */

二、HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试css</title>
    <link rel="stylesheet" href="../css/sheet.css">
</head>
<body>
<h3>test css</h3>

<ul>
    <li><strong>not strong</strong></li>
</ul>

<p id="green">我是绿色的</p>

<section id="sidebar">
    <h2>h2 in section which id equals sidebar</h2>
    <p>p in section which id equals sidebar</p>
</section>

<section class="center">
    <h3>in center section</h3>
    <p>in center section</p>
</section>
<p class="center">p in center use class</p>

<table class="fancy">
    <tr>
        <td>table使用fancy类</td>
        <td>其中所有td为橙色</td>
    </tr>
    <tr>
        <td class="nancy">td类名为nancy，定义为红色</td>
    </tr>
</table>
<p class="blue">p has class blue</p>
<h6 class="blue">h6 doesn't have class blue</h6>

<table class="blue" border="1">
    <tr>
        <th>2019</th>
        <th>0323</th>
    </tr>
    <tr>
        <td>南开大学</td>
        <td>津南校区</td>
    </tr>
</table>

<table class="blue" id="aqua" border="1">
    <tr>
        <th>2019</th>
        <th>0323</th>
    </tr>
    <tr>
        <td>南开大学</td>
        <td>津南校区</td>
    </tr>
</table>
<table class="company" border="1">
    <tr>
        <td>南开大学</td>
        <td><p>泰达</p>学院</td>
    </tr>
</table>

<a href="https://www.baidu.com">百度</a>
<h1>test before</h1>

<p class="important warning">多类选择器</p>
</body>
</html>