请选择 进入手机版 | 继续访问电脑版

CSS简析及常用属性

[复制链接]
漫舞飞天 发表于 2021-1-2 18:57:38 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
CSS简析



CSS简介

CSS

CSS:cascade style sheet 层叠样式表
CSS出现的原由

HTML仅有的功能不敷以实现(或实现起来相当复杂繁琐)一些相对复杂的页面效果,所以便出现了CSS来补强这一块,运用HTML+CSS创建的页面可以比单纯使用HTML创建的页面具有更多的页面效果,看起来更加吸引用户的眼球
作用

CSS的作用就是给HTML的各种元素添加样式,实现HTML无法实现的一些效果或简化HTML的实现方式。
语法格式

  1. 选择器{        属性:值;        属性:值;}
复制代码
CSS分类

行级样式表:接纳style属性在开始标签中书写
内部样式表:接纳style标签来书写
外部样式表:单独创建一个css文件,再页面中引入(外部样式表)
外部样式表引入方式:接纳下面方式
  1. 在style标签中书写,必须是第一句。接纳@import路径的方式区别:在外部样式表中可以写@import,不能写
复制代码
选择器分类

根本选择器
1.标签选择器:选择器的名字代表了页面上的一类标签。
2.类选择器:规定用圆点.来界说一个名字。任何标签都能使用,使用时用class引入
3.id选择器:规定用#来界说。只针对特定的一个标签而言
4.通用选择器:规定用*来界说。针对页面所有标签
扩展选择器
1.组合选择器:把多个选择器用逗号链接起来,表现多个选择器使用同一种样式
2.子女选择器:把多个选择器用空格毗连起来,表现什么什么内里的元素
3.伪类选择器:用冒号来界说
a.静态伪类: link:超链接被 点击之前的样式 visited:表现超链接被点击之后的样式
b.动态伪类:
focus:当元素获取焦点时现实的样式
hover:鼠标悬停于超链接之上显示的样式
active:超链接被鼠标选中并点击但尚未松开的样式
  1. /* 标签选择器 */p{        color: blue;}/* 类选择器 */.one{                font-weight:200px ;                font-size: 50px;}/* id选择器 */#str1{                color: red;}/* 通用选择器 */*{                font-style: italic;}//组合选择器p,div,#str2{                        color: blue;                }                //子女选择器                div p{                        color: red;                }                //伪类选择器                a:link{                        color: blue;                        text-decoration: underline;                }                a:visited{                        color: purple;                }                input:focus{                        border: 3px solid green;                }                a:hover{                        font-size: 50px;                        color: #008000;                }                a:active{                        font-size: 30px;                        color: yellow;                }
复制代码
选择器优先级

从样式表范例来看:行级>内部>外部
从选择器范例来看:id选择器>类选择器>标签选择器
任何情况下id选择器优先级最高。
就近原则:如果选择器范例一样,后引入的优先级别高
常用属性剖析

字体属性

  1.                 font-size                设置字体巨细                font-weight                界说字体粗细                font-style: italic;                斜体                font-family:"华文彩云";                字体范例                font-variant:small-caps;                英文小写变大写
复制代码
文本属性

  1.                 color:                设置颜色                text-decoration                文本装饰                        underline下划线                        line-through中划线                        overline无划线                letter-spacing                设置字母间距                word-spacing                设置单词间距
复制代码
配景属性

  1.                 backgroud-color                配景颜色                background-image                配景图片                background-position                设置配景图像的起始位置                background-repeat                设置配景的重复方式                background-attachment                配景的适应方式(图片是否随滚动条滚动而滚动或是固定在某一位置)
复制代码
列表属性

  1.                 list-style:none;                列表项前什么都不要                list-style-image                列表前面放置图片
复制代码
内容定位属性

  1.                 padding:内容到边的间隔                border:边框                margin:边框到边框的间隔                width:内容的宽度                heght:内容的高度
复制代码
定位属性

  1.                 position:定位                absolute绝对定位:原点在父盒子的左上角                relative相对定位:相对于自己在顺序流的原位置的左上角为原点                        顺序流:是指控件按照从左到右,从上到下的顺序分列的一种秩序。                        有两种情况:控件会脱离顺序流:第一种是绝对定位,第二种是设置浮动属性                                left:x坐标                right:y坐标
复制代码
鼠标属性:

  1.                 cursor                鼠标形状                         pointer 手形
复制代码
其他属性:

  1.                 display                显示或隐藏 block  none                z-index                z轴,垂直于屏幕的轴,雷同于ps的图层                overflow                内容超出预设框巨细的处置处罚方式                opacity                透明度,介于0-1之间,0为完全透明,1为完全不透明
复制代码
来源:https://blog.csdn.net/star_dust_/article/details/112060586
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )