CSS3
0|1CSS概念
0|1一、CSS简介
什么是CSS
- CSS:全称:Cascading Style Sheets 层叠样式表定义如何显示HTML元素
- 多个样式可以层层覆盖叠加,如果不同的CSS样式对同-html标签进行修饰,样式有冲突的 应用优先级高的,不冲突的共同作用
CSS能干什么
- 修饰美化html网页。
- 外部样式表可以提高代码复用性从而提高工作效率。
- html内容与样式 表现分离,便于后期维护。
CSS书写规范
CSS规则由两个主要的部分构成:选择器,以及一条或多条声明
选择器通常是您需要改变样式的HTML元素
每条声明由一个属性和一个值组成。
基础语法
0|1二、CSS导入方式
内嵌方式(内联方式 )
把CSS样式嵌入到html标签中,类似属性的用法
内部方式
在head标签中使用style标签引入css
外部方式
将css样式抽成一个单独文件,使用者直接引用
@import方式
在页面中引入一个独立的单独文件
0|1三、CSS选择器
主要用于选择需要添加样式的html元素
基本选择器
元素选择器:在head中使用style标签引入在其中声明元素选择器:html标签(属性:属性值)
id选择器:给需要修改样式的html元素添加di属性标识,在head中使用style标签引入在其中声明id选择器:#id值{属性:属性值}
class选择器:给需要修改样式的html元素添加class属性样式标识,在head中使用style标签引入在其中声明class选择器:class名{属性:属性值}
备注:以上选择器的优先级从高到低:id选择器,class选择器,元素选择器
属性选择器
伪对象选择器
伪元素选择器
层级选择器
父级选择器 子级选择器......,具体示例如下:
高级选择器
例子 | 例子描述 |
---|---|
.intro | 选择 class="intro" 的所有元素。 |
.name1.name2 | 选择 class 属性中同时有 name1 和 name2 的所有元素。 |
.name1 .name2 | 选择作为类名 name1 元素后代的所有类名 name2 元素。 |
#firstname | 选择 id="firstname" 的元素。 |
* | 选择所有元素。 |
p | 选择所有 <p> 元素。 |
p.intro | 选择 class="intro" 的所有 <p> 元素。 |
div, p | 选择所有 <div> 元素和所有 <p> 元素。 |
div p | 选择 <div> 元素内的所有 <p> 元素。 |
div > p | 选择父元素是 <div> 的所有 <p> 元素。 |
div + p | 选择紧跟 <div> 元素的首个 <p> 元素。 |
p ~ ul | 选择前面有 <p> 元素的每个 <ul> 元素。 |
[target] | 选择带有 target 属性的所有元素。 |
[target=_blank] | 选择带有 target="_blank" 属性的所有元素。 |
[title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 |
[lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 |
a[href^="https"] | 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 |
a[href$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 |
a[href*="w3school"] | 选择其 href 属性值中包含 "abc" 子串的每个 <a> 元素。 |
a:active | 选择活动链接。 |
p::after | 在每个 <p> 的内容之后插入内容。 |
p::before | 在每个 <p> 的内容之前插入内容。 |
input:checked | 选择每个被选中的 <input> 元素。 |
input:default | 选择默认的 <input> 元素。 |
input:disabled | 选择每个被禁用的 <input> 元素。 |
p:empty | 选择没有子元素的每个 <p> 元素(包括文本节点)。 |
input:enabled | 选择每个启用的 <input> 元素。 |
p:first-child | 选择属于父元素的第一个子元素的每个 <p> 元素。 |
p::first-letter | 选择每个 <p> 元素的首字母。 |
p::first-line | 选择每个 <p> 元素的首行。 |
p:first-of-type | 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 |
input:focus | 选择获得焦点的 input 元素。 |
:fullscreen | 选择处于全屏模式的元素。 |
a:hover | 选择鼠标指针位于其上的链接。 |
input:in-range | 选择其值在指定范围内的 input 元素。 |
input:indeterminate | 选择处于不确定状态的 input 元素。 |
input:invalid | 选择具有无效值的所有 input 元素。 |
p:lang(it) | 选择 lang 属性等于 "it"(意大利)的每个 <p> 元素。 |
p:last-child | 选择属于其父元素最后一个子元素每个 <p> 元素。 |
p:last-of-type | 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 |
a:link | 选择所有未访问过的链接。 |
:not(p) | 选择非 <p> 元素的每个元素。 |
p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 |
p:nth-last-child(2) | 同上,从最后一个子元素开始计数。 |
p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 |
p:nth-last-of-type(2) | 同上,但是从最后一个子元素开始计数。 |
p:only-of-type | 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 |
p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 |
input:optional | 选择不带 "required" 属性的 input 元素。 |
input:out-of-range | 选择值超出指定范围的 input 元素。 |
input::placeholder | 选择已规定 "placeholder" 属性的 input 元素。 |
input:read-only | 选择已规定 "readonly" 属性的 input 元素。 |
input:read-write | 选择未规定 "readonly" 属性的 input 元素。 |
input:required | 选择已规定 "required" 属性的 input 元素。 |
:root | 选择文档的根元素。 |
::selection | 选择用户已选取的元素部分。 |
#news:target | 选择当前活动的 #news 元素。 |
input:valid | 选择带有有效值的所有 input 元素。 |
a:visited | 选择所有已访问的链接。 |
0|1四、CSS属性
文字属性
属性名 | 取值 | 描述 |
---|---|---|
font-size | 数值 | 设置字体大小 |
font-family | 默认,宋体,楷体等 | 设置字体样式 |
font-style | normal正常;italic斜体; | 设置斜体样式 |
font-weight | 100-900数值;bold;bolder; | 粗体样式 |
font | 在一个声明中设置所有字体属性 | font:italic bold 36px "宋体"; |
文本属性
属性名 | 取值 | 描述 |
---|---|---|
color | 十六进制;表示颜色的英文单词; | 设置文本颜色 |
text-decoration | none;underline;overline;blink; | 文本的装饰线 |
text-align | left;right;center; | 文本水平对齐方式 |
word-spacing | normal;固定值; | 单词之间的间隔 |
line-height | normal;固定值; | 设置文本的行高 |
text-shadow | 四个取值依次是: 水平偏移;垂直偏移;模糊值;阴影颜色; | 设置阴影及模糊效果 |
text-indent | 5px缩进5像素;20%缩进父容器宽度的百分之二十; | 缩进元素中文本的首行 |
背景属性
属性名 | 取值 | 描述 |
---|---|---|
背景色 | 16进制;用于表示颜色的英语单词; | 设置背景色 |
背景图像 | url("图片路径") | 设置背景图片 |
背景重复 | 重复-y;重复-x;重复;不重复; | 设置背景图的平铺方向 |
背景位置 | 上下;左;右;中; | 改变图像在背景中的位置 |
渐变属性
线性渐变
颜色沿着一条直线过渡:从左到右、从右到左、从上到下等
径向渐变
圆形或椭圆形渐变,颜色不再沿着一条直线变化,而是从一个起点朝所有方向混合
列表属性
属性名 | 取值 | 描述 |
---|---|---|
list-style-type | disc,none等 | 改变列表的标识类型 |
list-style-image | url(“图片地址”) | 用图像表示标识 |
list-style-position | inside;outside | 标识出现在列表项内容之外还是内部 |
尺寸属性
width:设置元素的宽度
height:设置元素的高度
显示属性
轮廓属性
绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。常用属性:
属性名 | 取值 | 描述 |
---|---|---|
outline-style | solid(实线)/dotted(虚线)/dashed(虚线)等 | 设置轮廓的样式 |
outline-color | 16进制;用于表示颜色的英文 | 设置轮廓的颜色 |
outline-width | 数值 | 设置轮廓的宽度 |
浮动属性float
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
当把框1向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘。
当框1向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框2、使框2从视图中消失。
如果把所有三个框都向左移动,那么框1向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。
如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”。
clear属性:规定元素的哪一侧不允许其他浮动元素。它的取值如下:
取值 | 描述 |
---|---|
left | 在左侧不允许浮动元素。 |
right | 在右侧不允许浮动元素。 |
both | 在左右两侧均不允许浮动元素。 |
none | 默认值。允许浮动元素出现在两侧 。 |
onherit | 规定应该从父元素继承clear属性的值。 |
inline-block和float的区别
父元素塌陷
overflow属性
定位属性
position属性
相对定位:元素框便宜某个距离,元素仍保持其未定为前的形状,他原本所占位置的空间仍保留。
绝对定位(absolute):元素框从文档流完全删除,并相对于其包含块进行定位。包含块可能是文档中的另一个元素或者是初始包含块。
元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框。
固定定位(fixed):元素框的表现类似于将 position 设置为absolute,不过其包含块是视窗本身。
z-index属性
网页元素透明度
属性 | 说明 | 举例 |
---|---|---|
opacity:x | x值为0~1,值越小越透明 | opacity:0.4; |
filter:alpha(opavity=x) | x值为0~100,值越小越透明 | filter:alpha(opacity:40); |
0|1五、盒子模型
边框相关属性
属性名 | 取值 | 描述 |
---|---|---|
border-style | solid;double;dashed;dotted等 | 设置边框的样式 |
border-color | 16进制;用于表示颜色的英文; | 设置边框的颜色 |
border-width | 数值 | 设置边框的粗细 |
外边距相关属性
margin:外间距,边框和边框外层的元素的距离
属性 | 取值 | 描述 |
---|---|---|
margin | top;right;bottom;left | 四个方向的距离 |
margin-top | 数值 | 上间距 |
margin-bottom | 数值 | 下间距 |
margin-left | 数值 | 左间距 |
marfin-right | 数值 | 右间距 |
内边距相关属性
padding:内间距,元素内容和边框之间的距离((top right bottom left))
网页居中
margin:0px auto;
网页居中对齐的必要条件:
块元素 、固定宽度
属性值 | 描述 | |
---|---|---|
padding-left | ||
padding-right | ||
padding-top | ||
padding-bottom |
尺寸
0|1六、CSS3扩展属性
border-radius创建圆角
示例:border-radius:25px;
box-shadow:用于向方框添加阴影
示例:box-shadow:10px 10px 5px #888888;
background-size: 属性规定背景图片的尺寸
text-shadow:可向文本应用阴影
示例:text-shadow:5px 5px 5px #ffff00;
__EOF__
作 者:YXH
出 处:https://www.cnblogs.com/YxinHaaa/p/17366588.html
关于博主:编程路上的小学生,热爱技术,喜欢专研。评论和私信会在第一时间回复。或者直接私信我。
版权声明:署名 - 非商业性使用 - 禁止演绎,协议普通文本 | 协议法律文本。
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了