html前端学习三：CSS

css

css简介

CSS（层叠样式表）用来规定HTML文档的展现形式

CSS的定义和应用样式：
CSS属性和值用冒号分隔，每条样式结束后必须加分号;

color:red;↓    ↓属性  值声明

选择器

Class选择器：
用来将元素归类，为了能找出文档的某一类元素或给某一类元素应用样式
选择器则前面加 .

Id 选择器：
给元素指定一个唯一的标示符，这种标示符也是获取该元素或应用样式，在选择器前面加 #

通配符： *

style确定样式
.+class的值，表示选定class

<head><meta charset="utf-8" /><meta name="keyword" content="" /><meta name="description" content="" /><title>CSS层叠样式表</title><style type="text/css">p{color:red;}.text {color:skyblue;}</style></head><body><p> CSS样式调整</p><p class="text">  生活是幸福的！！！</p>
</body>

效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CMxleV3y-1577065561406)(http://img0.ph.126.net/CiTZSYmFAhK1_6j1x2dM_w==/6632508125935253175.png)]

style样式，按自上而下的代码顺序执行，如果多次赋值相同的样式属性，按最后一次效果执行

id选择器只能写一次，class选择器可以写很多次

    <style type="text/css">#content{color:green;}.text {color:skyblue;}p{color:red;}</style></head><body><p> CSS样式调整</p><p class="text">  生活是幸福的！！！</p><p class="text">  生活是幸福的！！！</p><p id="content" class="text">  生活是美好的！！！</p><p id="aaa">  生活是美好的！！！</p>

样式使用优先级
id样式 > class样式 > 通用标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tHGKMlSn-1577065561407)(http://img1.ph.126.net/noFvp-FWL9URhgU2f3tliQ==/6632651062444268104.png)]

style内敛样式

加在标签处

<p style="background:yellow" class="text">  生活是苦涩的！！！</p>

style最常用样式 link标签

rel属性

值	描述
alternate	文档的外部样式表。
stylesheet	文档的外部样式表。
start	集合中的第一个文档。
next	集合中的下一个文档。
prev	集合中的前一个文档。
contents	文档目录。
index	文档索引。
glossary	文档中所用字词的术语表或解释。
copyright	包含版权信息的文档。
chapter	文档的章。
section	文档的节。
subsection	文档的子段。
appendix	文档附录。
help	帮助文档。
bookmark	相关文档。

link标签引用样式

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

CSS的写法：

@charset "UTF-8";
/*** * @authors Your Name (you@example.org)* @date    2018-01-11 00:02:55* @version $Id$*/body {background:pink;
}

如果样式风格三种模式存在同一个HTML模式中
1.head 中style模式
2.标签元素中style=""属性模式
3.link中rel="stylesheet"模式中

按html顺序执行

sytle选择器

直接标签选择 p {color:red;}
class选择器以.调用class
class=“text”
.text
{size=10; face=“楷体”’’}
id选择器以#调用id(每个html页面id名字仅能出现一次)
id=“identified”
#identified
{background:pink;}

link引用shortcut icon

shortcut icon
用于网页标签栏的图标

<link rel="shortcut icon"  href="study.ico">

效果图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ifPENcgV-1577065561407)(http://img1.ph.126.net/V0JWxIj-CuvRjiI2CjmFdQ==/6632545509330603487.png)]

注意：icon图标可以百度找到

css样式更改

px:像素
em:相对单位

文本颜色：color:red;
背景颜色：background:gray
字符间距：letter-spacing:2em letter-spacing:10px(字与字相隔10像素) 注意：letter-spacing基本不用
空格间距：word-spacing 仅针对空格有效果
行间距：line-height:14px
文本对齐：text-align:center / left / right
text-align属性

值	描述
left	把文本排列到左边。默认值：由浏览器决定
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。

文本缩进：text-indent：2em (用于首行缩进)

ps: 单位em是相对于字体大小而定的，是个相对单位

装饰文本
text-decoration文本装饰：

值	解释
none	默认的一个文本（无样式）
underline	下划线
overline	上划线
line-through	定义一个从中间穿过的线（中划线）

a标签的下划线是默认样式underline

字体样式
文字大小：font-size:14px
文字字体：font-family:”微软雅黑”
文字风格：font-style:normal / italic

属性：
normal：默认值
italic：显示一个斜体

文字加粗样式
font-weight 设置文本字体的粗
值：
normal：默认字符
bold：定义默认粗体

数值：
100 100-300 细体
…… 400-500 默认
900 600-900 粗体
400等于normal，而700等同于bold
默认为400

背景颜色

可以进行url链接

<style type="text/css">body{background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1515666773485&di=fffdfca495d0d9b7a31825a7a8115e56&imgtype=0&src=http%3A%2F%2Fspecial.yunnan.cn%2F2008page%2Fent%2Fimages%2Fattachement%2Fjpg%2Fsite2%2F20170510%2F002324a0b89c1a7d71a263.jpg");}</style>

background图片没有找到，浏览器页面不会报错

背景颜色：background-color
背景图像：background-image
背景大小：background-size
图像填充：background-repeat
图像定位：background-position 值：x，y

background-image：给背景定义一个图像
background-image:url(“”);

background-repeat：图像以什么方式重复
repeat ：以平铺方式重复图像（默认）
repeat-x ：以x水平方向重复图像
repeat-y ：以y垂直方向重复图像
no-repeat：不重复（填充）

background-size: 100% auto;
background-size: 500px 600px;

背景拉伸问题

body写在html里面，需要对html拉伸

 html,body{height: 100%width:100%;}

简写方式：
background-image:url(“”);
background-repeat：图像以什么方式重复
可以将多个参数值写在一起，支持IE9以上浏览器

 div{background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1515666773485&di=fffdfca495d0d9b7a31825a7a8115e56&imgtype=0&src=http%3A%2F%2Fspecial.yunnan.cn%2F2008page%2Fent%2Fimages%2Fattachement%2Fjpg%2Fsite2%2F20170510%2F002324a0b89c1a7d71a263.jpg") no-repeat; }

图像定位：
border边框线

    <style type="text/css">div {height:30px;widht:20px;background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1515669529529&di=2d4f4024a0deb43907d035f48b22b4fe&imgtype=0&src=http%3A%2F%2Fwww.feizl.com%2Fupload2007%2F2015_06%2F150628005668176.jpg");background-repeat: no-repeat;background-position: -100px 10px;border:1px solid red;}</style>

ul无序列表去除小黑点

list-type: none;