广告制作网站,网站建设公司 首推万维科技,网站空间的选择,基于 wordpresscss的两种使用方式#xff1a;
①内嵌样式表
②导入外部样式表#xff08;实际开发常用#xff09;link href.... relstylesheet/
选择器#xff1a;
①标签选择器#xff1a;通过标签种类决定
②类选择器#xff1a;class..…css的两种使用方式
①内嵌样式表
②导入外部样式表实际开发常用link href.... relstylesheet/
选择器
①标签选择器通过标签种类决定
②类选择器class...
③id选择器id...
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlestylediv {font-family: serif;/*字体*/font-style: italic;/*斜体*/text-decoration: lightblue line-through;/*字体装饰*/line-height: 10px;/*行高*/letter-spacing: normal;/*字符之间的距离*/text-indent: 2em;/* 缩进 */text-align: center;/* 居中 */}/style/headbodydiv据介绍ChatGPT 新增的语音功能由一个新文本到语音模型提供支持能够仅通过文本和几秒钟的语音样本生成“类似人类的音频”OpenAI 也请了专业配音演员合作创作了 5 种声音。与此同时OpenAI还用了其开源语音识别系统 Whisper 将语音转录为文本。/div/body
/html
伪类
表示标签一种特殊状态。
语法
选择器:hover 鼠标悬停状态
选择器:active 鼠标点击后状态
选择器:focus 向拥有键盘输入状态
CSS列表修饰
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlestyleli {list-style-type: square;/* 列表图标样式square/none *//list-style-image: url();/* 列表图标图片样式 */list-style-position: inside;/* 图标位置 */list-style: ;/* 简写 */}/style/headbodyli1/lili2/lili3/lili4/lili5/li/body
/html
盒子模型box-model
CSS处理网页时他认为每个标签都存在盒子里。
盒子结构组成内容区外边距内边距边框 标签实际大小内容区大小内边距大小边框 内边距paddingl r t b
外边距margin
标签居中方式marginauto
边框标签最外层也计算在标签大小之内。
border-radius:边框弧度
border: 0px 线条 颜色
outline:none
浮动
floatnone/left/right
浮动后的标签会脱离原来的文档流不占用原来的空间。
因为不再占用原来的空间那么当有文档流占用时浮动的标签可能会遮挡文档流该如何解决呢
解决办法
①为浮动的标签的父标签添加宽高撑开父标签。
②clear清除浮动clear:left/right/both
CSS定位position
①相对定位relative
相对于起点定位文档流
不设置偏移量标签不会移动不脱离文档流
②绝对定位absolute
脱离文档流浮动。
相对于离他最近的开启了定位的父级标签positionrelative进行定位否则相对于浏览器窗口进行定位。
