CSS初探学习总结提高 一
Posted xj_love
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS初探学习总结提高 一相关的知识，希望对你有一定的参考价值。
进入CSS之后，我们的标签属性，要换一种风格来写了。这一块内容比较多，笔者会分几块来记录，方便大家学习参考探讨。
一.CSS3字体样式和属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3字体样式属性</title>
<style type="text/css">
h5
color: orange;
font-size: 30px;
font-family: "微软雅黑",serif,tahoma; /*注释*/
font-weight: 20;
font-style: italic;
span
font-weight: bolder;
strong
font-weight: normal,italic（斜体）,olique; /*让粗体变得不加粗*/
h2
font:italic bold 14px "微软雅黑";
</style>
</head>
<body>
<h5>我是字体样式</h5>
<fieldset>
<legend>字体</legend>
<ul>
<li>font-size 字号大小</li>
<li>font-family 字体 可以多个字体，逗号隔开；中文引号，多个英文要用引号，unicode字体（推荐，宋体，微软雅黑）</li>
<li>font-weight 字体粗细 normal,bold,bolder lighter，也可以数字</li>
<li>font-style 字体风格 normal,italic（斜体）,olique</li>
</ul>
<p><span>测试测</span>试测试测试测<strong>试测试</strong>测试测试测试测试测试</p>
<h2>综合设置字体样式,按照顺序来，至少有字号font-size，字体font-family</h2>
</fieldset>
</body>
</html>
二.选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
span /*标签选择器*/
font-size: 30px;
.blue
color: blue; /*类选择器*/
.red
color: red;
.orange
color: orange;
.green
color: green;
.font20
font-size: 20px;
#pink
color: pink; /*id选择器*/
/**
color: blue; /*通配符选择器*/
/**/
a:hover
color: red;
</style>
</head>
<body>
<fieldset>
<legend>标签选择器</legend>
<p>系统的标签</p>
</fieldset>
<fieldset>
<legend>类选择器</legend>
<p>自定义的名字，.开头，英文做名字,简单明了，调用class</p><br>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</fieldset>
<fieldset>
<legend>多类名选择器</legend>
<p></p>
<span class="red font20">多类名选择器</span>
</fieldset>
<fieldset>
<legend>id选择器</legend>
<p>自定义的名字，#开头，英文做名字,简单明了，调用id</p><br>
<p>id和类选择器的区别：</p>
<ul>
<li>类选择器可以重复使用</li>
<li>id选择器不可以重复使用，只能用一次</li>
</ul>
<span id="pink">id选择器</span>
</fieldset>
<fieldset>
<legend>通配符选择器</legend>
<p>*号表示，表示所有标签，一般测试时用</p>
<span>通配符选择器</span>
</fieldset>
<fieldset>
<legend>伪类选择器</legend>
<ul>
<li><h3>链接伪类选择器</h3></li>
<li>:link 未访问的链接</li>
<li>:visited 已访问的选择器</li>
<li>:hover 鼠标移动到链接上</li>
<li>:active 选择的链接</li>
<li>严格按照顺序来 定义 a:link</li>
</ul>
<a href="#">链接伪类选择器</a>
<br>
<ul>
<li><h3>结构伪类选择器</h3></li>
<li>li:first-child 选择第一个</li>
<li>li:last-child 选择最后一个</li>
<li>li:nth-child(1) 选择第1个，</li>
<li>li:nth-child(1n) 1n个全选，n从1开始</li>
<li>li:nth-child(2n)，从上往下数，2n个全选</li>
<li>li:nth-child(2n+1) 2n+1个全选，</li>
<li>li:nth-child(odd) 选择奇数</li>
<li>li:nth-child(even) 选择偶数</li>
<li>li:nth-last-child(even) 从最后一个孩子往上数</li>
</ul>
<br>
<ul>
<li><h3>目标伪类选择器</h3></li>
<li>:target 选中谁，谁变，配合a标签</li>
</ul>
</fieldset>
</body>
</html>
三.CSS外观属及应用
<head>
<meta charset="UTF-8">
<title>CSS外观属及应用</title>
<style type="text/css">
h3
text-align: center; /*水平对齐方式*/
p
line-height: 25px; /*行间距*/
text-indent: 2em; /*首行缩进，em两个中文字符*/
div
letter-spacing: 15px; /*字间距*/
word-spacing: 20; /*单词间距，相对英文*/
h4
color: rgba(0,0,0,0.5); /* 透明色*/
h1
text-shadow: 5px 2px 3px rgba(0,0,0,0.5); /*文字阴影： 水平距离，处置距离，模糊距离，颜色，前两个必须写: */
</style>
</head>
四.标签样式表
<fieldset>
<legend>块级标签</legend>
<ol>
<li>总是从新开始</li>
<li>高度，宽度，外边距都可以控制</li>
<li>宽度默认是容器的100%>
<li>可以容乃内联元素和其他块元素</li>
<li></li>
</ol>
</fieldset>
<br>
<fieldset>
<legend>行内标签</legend>
<ol>
<li>和相邻行内元素在一行上/li>
<li>设置宽高无效，但水平的padding和margin可以设置，垂直方向的无效</li>
<li>默认宽度是内容本身</li>
<li>行内元素只能容乃文本或者其他行内元素</li>
<li>注意：p，h1，这些文字块级标签，里面里面不能再放其他块级元素</li>
<li>注意：链接里面不能再放链接</li>
</ol>
</fieldset>
<br>
<fieldset>
<legend>标签相互转换</legend>
<ol>
<li>display:inline; 块级元素转为行内元素</li>
<li>display:block; 行内元素转为块级元素</li>
<li>display:inline-block 行内标签转为行内块标签</li>
</ol>
</fieldset>
五. 复合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复合选择器</title>
<style type="text/css">
/*div.color 交集选择器
font-weight: 700;
*/
/*.color
color: red;
*/
/*em,.hehe 并集选择器
color: blue;
*/
/*.demo ul li 后代选择器，带class
color: red;
div ul li
color: pink; 后代选择器,层层寻找，找到最后要的那个标签改变，
*/
/*.child li .child所有子类都变
color: red;
.child > li 加了>号后，只有.child的一级类变
color: green;
*/
</style>
</head>
<body>
<!-- <h3>-----交集选择器-----</h3>
<div class="color">我是交集选择器,标签加类或者id选择器</div>
<p class="color">没有交集的</p>
<hr> -->
<!-- <h3>-----并集选择器-----</h3>
<em>并集选择器，逗号隔开，一起定义</em>
<br>
<span class="hehe">并集选择器</span> -->
<!--
<hr>
<h3>-----后代选择器，带class-----</h3>
<div class="demo">
<ul>
<li>首页</li>
<li>导航</li>
</ul>
</div>
<hr>
<h3>-----后代选择器-----</h3>
<div>
<ul>
<li>百度</li>
<li>新浪</li>
</ul>
</div> -->
<!-- <h3>-----子元素选择器-----</h3>
<ul class="child">
<li>一级菜单变色，二级不变
<ul>
<li>二级菜单</li>
</ul>
</li>
</ul> -->
<!-- <h3>-----属性选择器-----</h3>
<ul>
<li>input[type] input里面有type属性的改动</li>
<li>input[type=text] input里面有type等于text的属性改动</li>
<li>input[type^=text] input里面有type等于text开头的属性改动</li>
<li>input[type$=text] input里面有type等于text结尾的属性改动</li>
<li>input[type*=text] input里面有type包含text的属性改动</li>
</ul> -->
<h3>-----伪元素选择器-----</h3>
<ol>
<li>p::first-letter 段落第一个字选中改变</li>
<li>p::first-line 段落第一行选中改变</li>
<li>p::first-selection 选中文字时可变的样式</li>
<li>div::beforecontent:"加字" 盒子内部前面加字</li>
<li>p::aftercontent:"加字" 盒子内部后面加字</li>
</ol>
</body>
</html>
以上是关于CSS初探学习总结提高 一的主要内容，如果未能解决你的问题，请参考以下文章