默认网站 域名 网站绑定,网站开发必须要用js,做同业业务一般关注哪些网站,东莞想做网站找什么公司提示#xff1a;文章写完后#xff0c;目录可以自动生成#xff0c;如何生成可参考右边的帮助文档 文章目录 一、CSS是什么#xff1f;二、使用步骤2.1.css的存放位置2.2.选择器2.3.常用CSS样式介绍与示例 一、CSS是什么#xff1f;
层叠样式表(英文全称#xff1a;Casc… 提示文章写完后目录可以自动生成如何生成可参考右边的帮助文档 文章目录 一、CSS是什么二、使用步骤2.1.css的存放位置2.2.选择器2.3.常用CSS样式介绍与示例 一、CSS是什么
层叠样式表(英文全称Cascading Style Sheets)不仅可以静态地修饰网页还可以配合各种脚本语言动态地对网页各元素进行格式化。
二、使用步骤
2.1.css的存放位置
css样式可以写 1.直接在标签上
img styleheight:100px;width:100px; src/static/img.jpg/2.在head标签中写style标签
style.c1{color:red;}
/style3.文件中
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
style.c1 {color: red;}
/style
link relstylesheet hrefcommon.css/
static目录下Common.css 文件名称
2.2.选择器
1.类选择器、id选择器只能一个、标签选择器 2.属性选择器 3.后代选择器
总代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.c1{color:red;}#c2{color:gold;}.yy li{color:pink;}input[typetext]{border:1px solid red;}.v1[xx456]{color:gold;}.yya{color:blue;}.outer{border:1px solid red;height:400px;width:200px;padding:20px 30px 45px 50px;}/style
/head
bodydiv classc1中国/divdiv idc2广西/divdiv上海/divulli上海/lili北京/lili云南/li/ulinput typetextinput typepassworddiv classv1 xx123 s/divdiv classv1 xx456 f/divdiv classv1 xx999 a/divdiv classyya hrefhttps://www.baidu.com/百度/adiva hrefhttps://www.baidu.com/谷歌/a/divulli美国/lili英国/lili德国/li/uldiv classouterdiv听老师的话/div/div
/div/body
/html当存在多个样式和覆盖的问题时重名会覆盖定义时以下方为准Important 不会被覆盖
2.3.常用CSS样式介绍与示例
1.宽度、高度
宽度支持百分比 行内标签默认无效 块级标签默认有效霸道右侧区域空白也不给占用
div stylewidth: 200px;height: 400px;/div
div stylewidth: 100%;height: 400px;/div2.块级标签和行内标签 Css样式-display:inline-block(style包含) 使行内标签对 height 和 width 生效 两标签的转化
div styledisplay: inline;移动/div
span styledisplay: block;联通/span3.字体和颜色
div stylecolor:#000;颜色支持RGB/div
div stylecolor:red;颜色/div
div stylefont-weight:800;字体加粗/div
div stylefont-family:rainbow-2;下载的字体样式/div4.文字对齐方式
div styletext-align: center水平方向居中/div
div styleline-height: 5px;垂直方向居中 /div
div styleborder: 1px solid red;边框颜色及大小 /div
5.浮动 如果在块级标签中加入了float属性那么这个块级标签奖不会再占用一整行而是自己有多大就占用多大。防止浮动字符被遮挡其解决办法在同级子标签的最下面添加 style“clear: both;”
div classcontainerdiv stylebackground-color: pink; height: 200px;width: 50px;float: rightdiv classcontent111/divdiv classcontent222/divdiv classcontent333/divdiv styleclear: both;/div/div/div 6.内边距 padding:20px 30px 45px 50px; 上右下左、顺时针 style.outer{border:1px solid red;height:400px;width: 200px;padding-top:20px;padding-left:25px;}/style 7.外边距 margin-top/right /left/ bottom margin:0 auto 居中
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylebody{margin: 0;}.c1{background-color: pink;width:988px;height:900px;margin : 0 auto;/* 居中margin*/}/style
/head
bodydiv classc1/div
/body
/html8.消除链接下的下划线 text-decoration:none
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle.sub_header a{text-decoration:none}/style
/head
bodydiv classsub_header a href链接/a/div
/body
/html 9.随鼠标变化 hover 与download
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle.c1 {color:grey;/* 原始的样式*/}.c1:hover {color: red;font-size: 20px;/* 有hover表示鼠标触碰后的样式*/}.c2 {width: 300px;height: 300px;border: 3px solid red;/* 原始的样式*/}.c2:hover {border: 3px solid green;/* 有hover表示鼠标触碰后的样式*/}.download {display: none;/* 隐藏*/}.app:hover .download {display: block;/* 鼠标碰到后显示*/}/style
/head
bodydiv classc1灰色字体碰到鼠标变大且变成红色/divdiv classc2红色边框碰到鼠标变成绿色/divdiv classappdiv鼠标放我这里触发显示二维码/divdiv classdownloadimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/78c30d4f259ed43ab20e810a522a6249.png alt/div/div
/body
/html10.after
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle.c1:after {content: 大帅比}/style
/head
bodydiv classc1张三/div
/body
/html11.透明度 opacity:0.7;
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle.c2{opacity:0.7;}/style
/head
bodydiv classc2李四/div
/body
/html 注意 a标签是行内标签行内标签的高度、内外边距默认无效需转化display:block 垂直方向居中 文本line-height 图片边距
