CSS基础

CSS：cascading style sheets，层叠样式表格；CSS起到装饰作用，将不同功能的代码做分离，方便维护；可以大大提高工作效率，将HTML代码和样式代码分离；

1. 书写规范

格式：选择器 {属性:属性值;属性:属性值}
- 选择器：确定当前css修饰的是哪一个元素

2. CSS与HTML的结合

2.1 内联结合

使用font标签可以改变文本的字体大小和字体颜色，但是字体大小最大是7，不能满足部分需求；

格式：

style=“属性名1: 属性值1;属性名2: 属性值2”
颜色取值：颜色英文单词/颜色16进制

<html><head><meta charset="UTF-8"><title>内联结合</title></head><body><div><font style="font-size: 100px; color:red;">这是一个div</font></div>   </body>
</html>

优点：简单方便，一般对少数的特定的元素进行单独设置；
缺点：复用性差

2.2 内部结合

需要在head标签中使用style标签

使用选择器选中元素

编写css代码

格式：

选择器{

属性名1：属性值1；

属性名2：属性值2；

}

<html><head><meta charset="UTF-8"><title>内部结合</title><style>font{font-size: 50px;color: red;}</style></head><body><div><font >这是font1</font><br /><font >这是font2</font><br /><font style="color: blue;">这是font3</font><br /></div></body>
</html>

优点：可以对多个标签进行统一样式设置
缺点：复用性不高，css代码和html代码分离不彻底，只能作用于当前页面；

2.3 外部结合

实现：

新建一个CSS样式文件，放入CSS文件夹下

编写CSS代码

使用link标签引入外部样式文件

font{font-size: 20px;color: red;
}

<html><head><meta charset="UTF-8"><title>外部结合</title><link rel="stylesheet" href="css/CSS_01.css"/></head><body><div><font >这是font1</font><br /><font >这是font2</font><br /><font >这是font3</font><br /></div></body>
</html>

优点：将HTML和CSS代码完全分离，复用性高；
./代表同一个目录
…/代表上一级目录

3. CSS选择器

让开发者能够选定元素；

3.1 Id选择器

使用 # 引入，引用的是元素的id属性；id唯一标识

语法：

#id属性值{
属性名:属性值;
}

<html><head><meta charset="UTF-8"><title>id选择器</title><style>font{font-size: 20px;}#i{color: red;}#j{color: orangered;}#k{color: green;}</style></head><body><font id="i">this is font one</font><br /><font id="j">this is font two</font><br /><font id="k">this is font three</font><br /></body>
</html>

3.2 类选择器

使用”.”来描述，引用的的是元素上的class属性值；

格式：

.class属性值{
属性名:属性值;
}

处理多个元素有相同样式效果的；

<html><head><meta charset="UTF-8"><title>类选择器</title><style>font{font-size: 20px;}.red{color: red;}.green{color: green;}.blue{color: blue;}</style></head><body><font class="red">this is font red</font><br /><font class="red">this is font red</font><br /><font class="green">this is font green</font><br /><font class="green">this is font green</font><br /><font class="blue">this is font blue</font><br /><font class="blue">this is font blue</font><br /></body>
</html>

3.3 标签选择器

对页面上的标签进行统一的设置，引用的就是标签的名称；

格式：
标签名{
属性名:属性值;
}

<html><head><meta charset="UTF-8"><title>标签选择器</title><!--将font标签中的文本颜色修改为红色将span标签中的文本颜色修改为蓝色将div标签中的文本颜色修改为绿色所有的文本大小都为20px--><style>body{font-size: 20px;}font{color: red;}span{color: blue;}div{color: green;}</style></head><body><font>this is a font1</font><br /><span>this is a span1</span><br /><font>this is a font2</font><br /><div>this is a div1</div><br /><span>this is a span2</span><br /><font>this is a font3</font><br /><div>this is a div2</div><br /></body>
</html>

3.4 选择器的分组

多个选择器使用同一段CSS,那么就可以将这多个选择器划为一组,使用分组。选择器之间使用逗号分开；

格式：
id选择器,class选择,元素选择器{
属性名:属性值;
}

<html><head><meta charset="UTF-8"><title>选择器的分组</title><!--font/span/div中的文本内容字体大小为20px,字体颜色为红色--><style>#f1,.s1,div{font-size: 20px;color: red;}</style></head><body><font id="f1">this is a font</font><br /><span class="s1">this is a span</span><br /><div>this is a div</div><br /></body>
</html>

3.5 派生选择器

通过依据元素在其位置的上下文关系来定义，可以使标记更加简洁。也称为上下文选择器；

父标签名(父id,父类名) 子标签名(子id,子类名){
属性名:属性值;
}

<html><head><meta charset="UTF-8"><title>派生选择器 </title><!--设置span中的font中内容样式,先找到span,再找到font--><style>span font{font-size: 20px;color: blue;}</style></head><body><span><font>这是一个font</font></span><div><font>这是一个font</font></div></body>
</html>

3.6 选择器的优先级

内联样式 > id选择器 > 类选择器 > 标签选择器

作用范围越小，优先级越大

<html><head><meta charset="UTF-8"><title>选择器优先级</title><style>/*标签选择器*/font{font-size: 10px;color: yellow;}/*类选择器*/.class{font-size: 20px;color: red;}/*id选择器*/#id1{font-size: 30px;color: beige;}</style></head><body><font id="id1" class="class" style="font-size: 40px; color: red;">这是一个font</font></body>
</html>

4.CSS伪类

CSS伪类用于向某些选择器添加特殊的效果；

在支持CSS的浏览器中，链接的不同状态都可用不同方式显示，这些状态包括活动状态、已访问状态、未被访问状态、鼠标悬停状态；

a:link {color: #FF0000} 未访问的链接
a:visited {color: #00FF00} 已访问的链接
a:hover {color: #FF00FF} 鼠标移动到链接上
a:active {color: #0000FF} 选定的链接

注意事项
a:hover 必须被置于 a:link 和 a:visited 之后
a:active 必须被置于 a:hover 之后

<html><head><meta charset="UTF-8"><title>CSS伪类</title><style>a:link {/* 未访问的链接 */color: cornflowerblue;}a:visited {/* 已访问的链接 */color: red;}a:hover {/* 鼠标移动到链接上 */color: orange;}a:active {/* 选定的链接 */color: green;}          font:hover{color: green;font-size: 100px;}          button{background-color: orange;}           button:hover{background-color: orangered;}</style></head><body><a href="index.html">this is a super link</a><br /><font>this is a font element</font><br /><button>按钮</button><br /></body>
</html>

5.CSS的属性

5.1 字体属性

CSS 字体属性允许设置字体样式 (font-family) 和字体加粗 (font-weight)，还可以设置字体的大小、字体风格（如斜体）和字体变形（如小型大写字母）；

font-family:

默认微软雅黑，如果浏览器不支持字体系列，就会使用默认的字体系列；

font-size:
字体大小
font-style:
字体倾斜度
font-weight:
字体的粗细

<html><head><meta charset="UTF-8"><title>字体属性</title><style>span{font-family: "楷体";font-size: 10px;font-style: oblique;font-weight: bolder;}        </style></head><body><span>这是一个span标签</span></body>
</html>

5.2 文本属性

可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进；

css文本属性
direction:
ltr: left to right
rtl: right to left
line-height:文本行高
text-align:文本的对齐方式
text-decoration：文本装饰常用属性underline、none、line-through

text-indent:首行缩进以em为单位，如首行缩进2个字符2em；

letter-spacing:字符间距,字符与字符之间的间距
word-spacing:单词间距,单词与单词之间的间距

<html><head><meta charset="UTF-8"><title>文本属性</title><style>div{font-size: 50px;color: gray;direction: ltr;text-align: left;text-decoration: none;}a{font-size: 50px;text-decoration: none;}#i1{font-size: 100px;letter-spacing: 20px;}#i2{font-size: 100px;word-spacing: 20px;}</style></head><body><div>这是一个div</div><a href="index.html">超链接</a><div id="i1">this is a div1</div><div id="i2">this is a div2</div></body>
</html>

5.3 背景属性

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果；

background-color:将颜色作为背景
background-image:将图片作为背景

<html><head><meta charset="UTF-8"><title>CSS背景属性</title><style>body{background-color: darkgoldenrod;color: red;font-size: 100px;background-image:url(img/123.png);background-size: cover;}</style></head><body>卡卡之家</body>
</html>

5.4 尺寸属性

CSS 尺寸 (Dimension)属性允许控制元素的高度和宽度。同样，允许你增加行间距；只对你设定的范围有效；

CSS尺寸属性对行内元素无效，只对是块级元素

<html><head><meta charset="UTF-8"><title>CSS尺寸属性</title><style>#d1{min-width: 100px;max-width: 300px;min-height: 100px;max-height: 300px;width: 500px;height: 500px;background-color: green;}</style></head><body><div id="d1">这是一个div</div></body>
</html>

5.5 列表属性

CSS 列表属性允许放置、改变列表项标志，或者将图像作为列表项标志；

list-style-image 将图象设置为列表项标志；
list-style-position 设置列表中列表项标志的位置；
list-style-type 设置列表项标志的样式；

<html><head><meta charset="UTF-8"><title>CSS列表属性</title><style>ul{/*文本内容的对齐方式*/text-align: center;list-style-image: url(img/a.gif);/*list-style-type: circle;*/list-style-position: inside;}</style></head><body><ul><li>卡卡</li><li>之家</li><li>卡卡</li></ul></body>
</html>

5.6 边框属性

CSS边框属性允许规定元素边框的样式、宽度和颜色；

<html><head><meta charset="UTF-8"><title>CSS边框属性</title><style>body{text-align: center;}#d{width: 300px;height: 300px;/*样式都一样*/border: dotted greenyellow 10px;/** 左边框* 样式：点状* 颜色：淡绿* 宽度：10px*//*border-left-style: dotted;border-left-color: greenyellow;border-left-width: 10px;*/border-left: dotted greenyellow 10px;/** 上边框* 样式：虚线* 颜色：中绿* 宽度：15px*/border-top: dashed mediumseagreen 15px;/** 右边框* 样式：实线* 颜色：绿* 宽度：20px*/border-right:solid green 20px;/** 下边框* 样式：实线* 颜色：绿* 宽度：20px*/border-bottom: double darkgreen 25px;}</style></head><body><img id="d" src="img/123.png" /></body>
</html>

5.7 圆角边框

边角是个弧形；

<html><head><meta charset="UTF-8"><title>CSS圆角边框</title><style>img{width: 500px;height: 500px;border-radius: 50%;}</style></head><body><img src="img/123.png" /></body>
</html>

CSS基础标签属性及案例相关推荐

vscode html 属性换行,vscode中格式化css代码标签属性不换行
vscode中格式化css代码标签属性不换行,如下图,教程,后将,解决方法,首选 vscode中格式化css代码标签属性不换行易采站长站,站长之家为您整理了vscode中格式化css代码标签属性不换 ...
CSS基础样式属性设置
文章目录 css基础样式与属性设置一.宽和高二.字体属性 1. font-family:文字字体 2.font-size:字体大小 3.font-weight:文字粗细 4.font-style: ...
html笔记（一）html4+css2.0、css基础和属性、盒模型
w3c 官网这里是 html4 的内容大标题小节一.关于HTML 1. 基本语法 2. HTML常用标签 3. 相对路径和绝对路径二.css基础 1. 表单元素 2. 创建样式表 3. cs ...
HTML与CSS基础之属性选择器(二)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>属性选 ...
web前端入门到实战：css基础-定位+网页布局案例
position:static 忽略top/bottom/left/right或者z-index position:relative 设置相对定位的元素不会脱离文档流 position:fixed 不 ...
CSS 基础知识属性
阅读目录参考文献 CSS 基础知识 CSS 是怎么工作的? CSS 的使用层叠.优先级和继承 @规则常见值与单位尺寸(长度/大小) color 颜色值渐变色 gradient 计算函数 ca ...
1)前端的html和css基础标签简单盒子
1) 前端:html 这里使用谷歌浏览器开发工具使用pycharm 1.HTML的概述 html全称HyperText Mackeup Language,翻译为超文本标记语言,它不是一种编程语言,是 ...
HTML/CSS常用标签属性及样式
1.常用布局样式: 参数描述 width 宽度 height 高度 background 背景颜色 border 边框 padding 内边距 margin 外边距 float 浮动 clear 清 ...
CSS基础-标签显示模式（display）【学习笔记】
标签的三种显示模式三种显示模式的特点以及区别三种显示模式的相互转化什么是标签显示模式什么是标签的显示模式? 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个作 ...

CSS基础标签属性及案例