CSS学习记录
CSS学习记录
<css>基本语法:
<head>
<style type="text/css">
选择器（即修饰对象）
{对象的属性1：属性值1；
对象的属性2：属性值2；
}
</style>
</head>
内部样式：
标签选择器
<style>
/*选择器：你要操作的页面元素
标签选择器：作用于当前页面所有的li标签*/
li{
color: red;
}
</style>
<title>标签选择器</title>
</head>
<body>
<ul>
<li>理学院</li>
<li>计算机学院</li>
<li>外国语学院</li>
</ul>
结果图：
ID选择器
<style>
/*ID选择器：给当前页面指定的id元素添加样式*/
#change{
color: red;
font-size: 50px;
}
</style>
<title>ID选择器</title>
</head>
<body>
<ul>
<li id="change">理学院</li><!--id只能在当前页面出现一次，可以保证id对应一个元素-->
<li>计算机学院</li>
<li>外国语学院</li>
</ul>
结果图：
类选择器
<style>
/*类选择器：给当前页面某一类标签添加样式
同一个页面，可以存在多个同名的类*/
.change{
color: red;
}
</style>
<!--class选择器-->
<title>类选择器</title>
</head>
<body>
<ul>
<li class="change">理学院</li>
<li>计算机学院</li>
<li class="change">外国语学院</li>
<li>汽车学院</li>
</ul>
结果图：
三种选择器组合应用
<style>
#td1 { font-size: 13px;">#td2 {background-color: blue }
#td3 { font-size: 13px;">#td4 {background-color: green }
#td5 { font-size: 13px;">#td6 {background-color: red }
p {font-size: 12px; }
.first {font-size: 28px; }
.second {font-size: 18px; }
.third {font-size: 14px; }
#td2 p {color: blueviolet }
td{padding: 0 10px 0 20px;}/*padding:文本距离上右下左的间距*/
</style>
<title>Title</title>
</head>
<body>
<table width="900" height="400" align="center" cellspacing="0">
<tr>
<td id="td1">
<p class="first">响应式网站</p>
<p class="second">响应式网站</p>
<p class="third">响应式网站</p>
<p>响应式网站</p>
</td>
<td id="td2">
<p class="first">全程商店</p>
<p class="second">全程商店</p>
<p class="third">全程商店</p>
<p>全程商店</p>
</td>
<td id="td3">
<p class="first">企业化信息</p>
<p class="second">企业化信息</p>
<p class="third">企业化信息</p>
<p>企业化信息</p>
</td>
</tr>
<tr>
<td id="td4">
<p class="first">VR多媒体化</p>
<p class="second">VR多媒体化</p>
<p class="third">VR多媒体化</p>
<p>VR多媒体化</p>
</td>
<td id="td5">
<p class="first">数字化展馆</p>
<p class="second">数字化展馆</p>
<p class="third">数字化展馆</p>
<p>数字化展馆</p>
</td>
<td id="td6">
<p class="first">移动数字营销</p>
<p class="second">移动数字营销</p>
<p class="third">移动数字营销</p>
<p>移动数字营销</p>
</td>
</tr>
</table>
结果图：
CSS三种样式使用方法
<!--在默认情况下，优先级：
行内样式>内部样式>外部样式
-->
<!--内部样式-->
<link rel="stylesheet" href="../../css/First.css"><!--外部样式-->
<style>
#qwer{
color: red;
}
</style>
<title>css的使用方法</title>
</head>
<body>
<!--css的使用方法分3类：
1：行内样式（li style=，，）
优点：样式的优先级很高，可以解决实现整体风格下的单独效果。
缺点：代码繁复，影响正常的代码审查，不利于后期维护！（最不推荐！）
2：内部样式
缺点：代码复用性程度低（不同页面不能复用）
3：外部样式-->
<ul>
<li style="color: red">数学院</li> <!--行内样式-->
<li>法学院</li>
<li>理学院</li>
<li id="qwer">工学院</li>
<li>外国语学院</li>
<li>航海学院</li>
<li>国防生学院</li>
</ul>
补充：选择器
后代选择器
<style>
/*标签选择器 权值：1*/
li { color: yellow; }（li后面有一个空格）
/*id选择器 权值：100*/
#second li { color: red; }
</style>
<title>补充：选择器</title>
</head>
<body>
<!--后代选择器-->
<ul id="first">
<li>烟台大学</li>
<li>鲁东大学</li>
<li>山东工商学院</li>
</ul>
<ul id="second">
<li>青岛理工大学</li>
<li>山东科技大学</li>
<li>中国石油大学</li>
</ul>
<ul id="third">
<li>青岛理工大学2</li>
<li>山东科技大学2</li>
<li>中国石油大学2</li>
</ul>
结果图：
子代选择器
<ul id="container">
<li class="university">
烟台大学
</li>
<li>数学院</li>
<li>法学院</li>
<li>理学院</li>
</ul>
<ul>
<li class="university2">
青岛理工大学
</li>
<li>理学院</li>
<li id="middle">外国语学院</li>
<li>土木学院</li>
</ul>
</ul>
结果图：
相邻选择器（往下相邻，不会往上）
<style>
/*相邻选择器*/（只有h1和第一个P变）
h1+p{
color: red;
}
</style>
<title>相邻选择器</title>
</head>
<body>
<h1>this is a title</h1>
<p>this is a title</p>
<p>this is a title</p>
<p>this is a title</p>
<p>this is a title</p>
结果图：
伪类选择器
<style>
/* li:nth-child(2n){
color: red;
}*/
/* li:first-child{
color:blue;
}
li:last-child{
color: green;
}*/
li:hover{
color: red;/*hover:鼠标放哪里哪里变色*/
}
</style>
<title>伪类选择器</title>
</head>
<body>
结果图：
伪类组合器组合使用
<meta charset="UTF-8">
<style>
li:nth-child(2n):hover{
color: red;
}
li:nth-child(2n-1):hover{
color: blue;
}
</style>
<title>伪类选择器组合使用</title>
</head>
<body>
<ul>
<li>烟台大学</li>
<li>鲁东大学</li>
<li>山东工商学院</li>
<li>青岛理工大学</li>
<li>山东科技大学</li>
<li>中国石油大学</li>
</ul>
<style>
结果图：
通配符选择器
<style>
/*通配符选择器：配备所有的属性*/
*{
padding: 0;
margin: 0;/*margin：外边距*/
}
#div1{
height: 200px;
background-color: red;
margin: 20px;
}
li{
color: blue;
list-style: none;/*去掉列表前面的小点*/
}
</style>
<title>通配符选择器</title>
</head>
<body>
<div id="div1">
<ul>
<li>kk</li>
<li>kk</li>
<li>kk</li>
</ul>
</div>
结果图：
文本阴影
<style>
p{
font-size: 100px;
text-align: center;
color: red;
text-shadow: 5px 5px 0 yellow;/*北京颜色*/
-webkit-text-stroke: 1px black;/*描边宽度和颜色*/
}
</style>
<title>文本阴影</title>
</head>
<body>
<p>青岛理工大学</p>
</body>
结果图：
