c 做网站网站,海尔网站建设目标,上海申请注册公司,权威网站建设公司CSS简介 CSS概念
CSS#xff08;Cascading Style Sheets#xff09;层叠样式表#xff0c;又叫级联样式表#xff0c;简称样式表
CSS文件后缀名为.css
CSS用于HTML文档中元素样式的定义
为什么需要CSS
使用css的唯一目的就是让网页具有美观一致的页面
语法
CSS 规则…CSS简介 CSS概念
CSSCascading Style Sheets层叠样式表又叫级联样式表简称样式表
CSS文件后缀名为.css
CSS用于HTML文档中元素样式的定义
为什么需要CSS
使用css的唯一目的就是让网页具有美观一致的页面
语法
CSS 规则由两个主要的部分构成选择器以及一条或多条声明样式
选择器通常是您需要改变样式的 HTML 元素
每条声明由一个属性和一个值组成
属性property是您希望设置的样式属性style attribute。每个属性有一个值。属性和值被冒号分开
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleh3 {color: red;font-size: 50px;}/style
/headbodyh3标题标签/h3/body/htmlCSS的引入方式
内联样式行内样式
要使用内联样式你需要在相关的标签内使用样式style属性。Style 属性可以包含任何 CSS 属性 温馨提示 缺乏整体性和规划性不利于维护维护成本高 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyp stylecolor: red;font-size: 30px;我是P标签/p
/body
/html内部样式
当单个文档需要特殊的样式时就应该使用内部样式表。你可以使用 style 标签在文档头部定义内部样式表 温馨提示 单个页面内的CSS代码具有统一性和规划性便于维护但是在多个页面之间容易混乱 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep{color: red;font-size: 50px;}/style
/head
bodyp我是第一个P标签/pp我是第二个P标签/p
/body
/html外部样式推荐
当样式需要应用于很多页面时外部样式表将是理想的选择。在使用外部样式表的情况下你可以通过改变一个文件来改变整个站点的外观。每个页面使用 link 标签链接到样式表。 link 标签在文档的头部
link relstylesheet typetext/css hrefxxx.css选择器一 CSS语法 规则由两个主要的部分构成选择器以及一条或多条声明样式
全局选择器
可以与任何元素匹配优先级最低一般做样式初始化
style*{margin: 0;padding: 0;}
/style!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{color: red;}/style
/headbodyp第一个p标签/pp第二个p标签/pp第三个p标签/pp第四个p标签/pp第五个p标签/ph1一级标题/h1ulli无序列表/lili无序列表/lili无序列表/lili无序列表/li/ululli我/lili是/lili郭/lili家/lili旗/li/ul/body
/html元素选择器
HTML文档中的元素p、b、div、a、img、body等。
标签选择器选择的是页面上所有这种类型的标签所以经常描述“共性”无法描述某一个元素的“个性”
stylep{font-size:14px;}
/style!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep{color: red;}/style
/head
bodyp第一个P标签/pp第二个P标签/pp第三个P标签/pp第四个P标签/ph3三级标题/h3
/body
/html
再比如说我想让“学完前端继续学Java”这句话中的“前端”两个变为红色字体那么我可以用span标签把“前端”这两个字围起来然后给span标签加一个标签选择器
stylespan{color: green;}
/stylep学完了span前端/span继续学Java/p
span{color: red;
}温馨提示 所有的标签都可以是选择器。比如ul、li、label、dt、dl、input、div等无论这个标签藏的多深一定能够被选择上选择的所有而不是一个 类选择器
规定用圆点 . 来定义针对你想要的所有标签使用 优点 灵活 h2 classoneclass你好/h2
/*定义类选择器*/
.oneclass{width:800px;
}class属性的特点 类选择器可以被多种标签使用类名不能以数字开头同一个标签可以使用多个类选择器。用空格隔开 h3 classclassone classtwo我是一个h3啊/h3
h3 classteshu classzhongyao我是一个h3啊/h3 // 错误!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.red{color: red;}.green{color: green;}.size{font-size: 50px;}/style
/head
bodyp classred size第一个P标签/pp classgreen第二个P标签/pp第三个P标签/p/body
/html选择器二
ID选择器
针对某一个特定的标签来使用只能使用一次。css中的ID选择器以 # 来定义
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#one{color: red;}/style
/head
bodyp idone第一个P标签/pp第二个P标签/pp第三个P标签/p
/body
/htmlh2 idmytitle你好/h2style#mytitle{color: red;}
/style特别强调 ID是唯一的ID不能以数字开头 合并选择器
语法选择器1,选择器2,...{ }
作用提取共同的样式减少重复代码
style.p,.san{color: red;}/style选择器的优先级
CSS中,权重用数字衡量
元素选择器的权重为: 1
class选择器的权重为: 10
id选择器的权重为: 100
内联样式的权重为: 1000
优先级从高到低: 行内样式 ID选择器 类选择器 元素选择器
字体属性 CSS字体属性定义字体颜色、大小加粗文字样式
color文本的颜色
规定文本的颜色
div{ color:red;}
div{ color:#ff0000;}
div{ color:rgb(255,0,0);}
div{ color:rgba(255,0,0,.5);}font-size文本的大小
设置文本的大小
能否管理文字的大小在网页设计中是非常重要的。但是你不能通过调整字体大小使段落看上去像标题或者使标题看上去像段落。
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}温馨提示 chrome浏览器接受最小字体是12px font-weight文本的粗细
设置文本的粗细
值描述bold定义粗体字符bolder定义更粗的字符lighter定义更细的字符100~900定义由细到粗 400等同默认而700等同于bold
H1 {font-weight:normal;}
div{font-weight:bold;}
p{font-weight:900;}font-style文本的字体样式
指定文本的字体样式
值描述normal默认值italic定义斜体字
font-family字体
font-family属性指定一个元素的字体 温馨提示 每个值用逗号分开 如果字体名称包含空格它必须加上引号 font-family:Microsoft YaHei,Simsun,SimHei;!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep{color: #ff0000;font-size: 30px;font-weight: 700;font-style: italic;font-family: 微软雅黑;}/style
/head
bodyp我是P标签/p
/body
/html背景属性
CSS背景属性主要有以下几个
属性描述background-color设置背景颜色background-image设置背景图片background-position设置背景图片显示位置background-repeat设置背景图片如何填充background-size设置背景图片大小属性
background-color背景颜色
该属性设置背景颜色
div classbox/div
.box{width: 300px;height: 300px;background-color: palevioletred;
}
background-image背景图像
设置元素的背景图像
元素的背景是元素的总大小包括填充和边界不包括外边距。默认情况下background-image属性放置在元素的左上角如果图像不够大的话会在垂直和水平方向平铺图像如果图像大小超过元素大小从图像的左上角显示元素大小的那部分
div classbox/div
.box{width: 600px;height: 600px;background-image: url(images/img1.jpg);
}
background-repeat设置如何平铺背景图像
该属性设置如何平铺背景图像
值说明repeat默认值repeat-x只向水平方向平铺repeat-y只向垂直方向平铺no-repeat不平铺
.box{width: 600px;height: 600px;background-color: #fcc;background-image: url(images/img1.jpg);background-repeat: no-repeat;
}
background-size设置背景图像的大小
该属性设置背景图像的大小
值说明length设置背景图片的宽度和高度第一个值宽度第二个值高度如果只是设置一个第二个值autopercentage计算相对位置区域的百分比第一个值宽度第二个值高度如果只是设置一个第二个值autocover保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小contain保持图片纵横比并将图像缩放成适合背景定位区域的最大大小
.box{width: 600px;height: 600px;background-image: url(images/img1.jpg);background-repeat: no-repeat;background-size: 100% 100%;
}
background-position设置背景图像的起始位置
该属性设置背景图像的起始位置其默认值是0% 0%
值说明left top左上角left center左 中left bottom左 下right top右上角right center右 中right bottom右 下center top中 上center center中 中center bottom中 下x% y%第一个值是水平位置第二个值是垂直位置左上角是0% 0%右下角是100% 100% 。如果只指定了一个值其他值默认是50%。默认是0% 0%xpos ypos单位是像素
.box{width: 600px;height: 600px;background-color: #fcc;background-image: url(images/img1.jpg);background-repeat: no-repeat;background-position: center;
}
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box{width: 500px;height: 500px;background-color: #ffff00;}.box2{width: 1000px;height: 1000px;background-image: url(1.webp);background-repeat: no-repeat;background-size: cover;background-position: center center;}/style
/head
bodydiv classbox/divdiv classbox2/div
/body
/html文本属性
text-align元素文本的水平对齐方式
指定元素文本的水平对齐方式
值描述left文本居左排列默认值right把文本排列到右边center把文本排列到中间
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}text-decoration下划线、上划线、删除线
text-decoration 属性规定添加到文本的修饰下划线、上划线、删除线等
值描述underline定义下划线overline定义上划线line-through定义删除线
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}text-transform控制文本的大小写
text-transform 属性控制文本的大小写
值描述captialize定义每个单词开头大写uppercase定义全部大写字母lowercase定义全部小写字母
h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}text-indent首行文本的缩进
text-indent 属性规定文本块中首行文本的缩进
p{text-indent:50px;
}温馨提示 负值是允许的。如果值是负数将第一行左缩进 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.p1{text-align: center;text-decoration: underline;text-transform: lowercase;}.p2{text-indent: 30px;}/style
/head
bodyp classp1这是一个P标签/pp classp2元素的背景是元素的总大小包括填充和边界不包括外边距。默认情况下background-image属性放置在元素的左上角如果图像不够大的话会在垂直和水平方向平铺图像如果图像大小超过元素大小从图像的左上角显示元素大小的那部分/p
/body
/html表格属性
使用 CSS 可以使 HTML 表格更美观
表格边框
指定CSS表格边框使用border属性
table, td { border: 1px solid black;
}折叠边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开
table { border-collapse:collapse; }
table,td { border: 1px solid black; }表格宽度和高度
width和height属性定义表格的宽度和高度
table { width:100%; }
td { height:50px; }表格文字对齐
表格中的文本对齐和垂直对齐属性
text-align属性设置水平对齐方式向左右或中心
td { text-align:right; }垂直对齐属性设置垂直对齐
td { height:50px; vertical-align:bottom; }表格填充
如果在表的内容中控制空格之间的边框应使用td和th元素的填充属性
td { padding:15px; }表格颜色
下面的例子指定边框的颜色和th元素的文本和背景颜色
table, td, th { border:1px solid green; } //边框颜色
td { background-color:green; color:white; } //背景颜色 字体颜色!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyletable, td { border: 3px solid black; //表格边框}table{border-collapse: collapse;//表格边框折叠*}table{width: 500px;//表格宽度}td{text-align: center;//表格内文本对齐方式padding: 10px;//表格填充}td{background-color: aqua;color: brown;//表格背景颜色与字体颜色}/style
/head
bodytabletrtd文本框/tdtd文本框/tdtd文本框/td/trtrtd文本框/tdtd文本框/tdtd文本框/td/trtrtd文本框/tdtd文本框/tdtd文本框/td/tr/table
/body
/html关系选择器
关系选择器分类
后代选择器子代选择器相邻兄弟选择器通用兄弟选择器
后代选择器
定义
选择所有被E元素包含的F元素中间用空格隔开
语法
E F{}ulli宝马/lili奔驰/li
/ulolli奥迪/li
/ol
ul li{color:green;
}!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleul li{color: #00ff00;}/style
/head
bodyulli苹果/lili香蕉/lili蔬菜olli黄瓜/lili茄子/li/ol/li/ul
/body
/html子代选择器
定义
选择所有作为E元素的直接子元素F对更深一层的元素不起作用用表示
语法
EF{}div a href#子元素1/ap a href#孙元素/a /pa href#子元素2/a
/div
diva{color:red
}
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediva{color:red}/style
/head
bodydiv a href#子元素1/ap a href#孙元素/a /pa href#子元素2/a/div/body
/html相邻兄弟选择器
定义
选择紧跟E元素后的F元素用加号表示选择相邻的第一个兄弟元素只能向下选择
语法
EF{}h1h1元素/h1
p第一个元素/p
p第二个元素/ph1p{color:red;
}!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleh1p{color:#00ffff;}/style
/head
bodyh1h1元素/h1 p第一个元素/p p第二个元素/p
/body
/html通用兄弟选择器
定义
选择E元素之后的所有兄弟元素F作用于多个元素用~隔开只能向下选择
语法
E~F{}h1h1元素/h1
p第一个元素/p
p第二个元素/ph1~p{color:red;
}!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleh1~p{color:#00ffff;}/style
/head
bodyh1h1元素/h1 p第一个元素/p p第二个元素/p
/body
/html
