指尖的流连 8月23
2015-08-23 17:06 指尖流连 阅读(299) 评论(0) 编辑 收藏 举报吧主勿删, 刚学,个人总结
css注释: /* */
CSS外部方式:
在XHTML中的 <head>里面使用<link>
<head> <link rel = " stylesheet" type = "text/css" href = "执行的文件" > </head>
选择器:选择器在style里面,style在head里面
通配符选择器在所有选择器的前面: 它的作用初始化 * { }
1. 元素选择器: tab { color: blue; } 把所有tab里的元素改为蓝色
<style>
tab {color: blue; font-size: 32px ;} : /* 将欢迎光临改为蓝色字体,并设置字体大小为32px , (font-size 设置字体大小) ( color 字体颜色) * /
</style>
<body> <tab>欢迎光临</tab> </body> ,<tab>在<body>里面
2. 类选择器: (class = "nba") ( .nba ,点后面是值)
<style>
.nba {color:red font-weight: 700;} /* 将世界你好改为红色字体,并把字体加粗, (font-weight 字体加粗 400=正常,700=加粗 ) */
</style>
<body><p class = "nba">世界你好!</p> </body>
3. id选择器: ( id = "word" ) ( #word ,#号后面是值)
<style>
#word{color:blue font-style:italic ;} : /* 将 你好,明天改为蓝色,并把字体倾斜, (font-style:italic 字体倾斜) */
</style>
<body><p id = "word">你好,明天 <p> </body>
id选择器与类选择器的区别:如果要多次使用Class,就使用类选择, 如果只使用一次,就使用ID选择, ID是唯一
4. 伪类选择器: link (未被访问) visited (已访问) hover (鼠标移入时) active(鼠标点击时状态)
<style>
.tab1 : visited { color: blue; } /* visited 当标题被点击过后是蓝色 */ /*hover 当鼠标移入标题时是蓝色*/
</style>
<body> <a class = "tab1" href="XX网站" > 标题 <p></body>
5.交集选择器:
<style>
dib.tab1 { color: red;}
p. txt1 {color: red;}
</style> /* 把div元素里的tab1,世界你好改成红色, 把p元素里的txt1 你好,明天改成红色 * /
<body>
<div class = "tab1">世界你好1 </div>
<div class = "tab2">世界你好2 </div>
<p class = "txt1"> 你好,明天1 </p>
<p class = "txt2"> 你好,明天2 </p>
</body>
6. 并集选择器:
<style>
div,p,h1,span {color:red font-size:32px; }
</style>
<body> /* 把div,p,h1,span元素里的 浪漫七夕 改为红色, 字体32px
<div>浪漫七夕</div>
<p>浪漫七夕</p>
<h1>浪漫七夕</h1>
<span>浪漫七夕</span>
</body>
字体:font
{font-family: } 字体样式
{font-size: } 字体大小
{font-style:italic } 字体倾斜
{font-weight:700} 字体加粗 400 =正常 700 = 加粗
字体的缩写顺序: 倾斜-->字体加粗--->大小--->样式
文本样式:text
{text-indent: } 首行缩进
{text-align: } 对齐方式: (left 左对齐) (right 右对齐) (center 水平居中) (justify 左右对齐,英文)
{text-decoration: } 修饰方式: (underline 下划线) (overline 上划线) (none 没有样式) (line-through 删除线)
{text-shadow: } 文字阴影
{text-transform: } 大小写 : (capitalize 首字母大写) (uppercase 全部大写) (lowercase 全部小写)
{line-height: } 行高(可垂直居中,单行)
{letter-spacing: } 字间距
{word-spacing: } 词间距(英文) , {letter-spaing: } 词间距(中文)
背景:
{background - color: } 背景颜色
{background - image: 图片路径 } 图片背景
{background - repeat: no-repeat } 图片背景不铺满
{background - position: } 定位背景图片
