新乡做新网站,wordpress 添加固定字段,福建建设工程报建网站,莱芜金点子最新招工CSS概述
CAscading Style Sheets(级联样式表)
CSS是一种样式语言,用于对HTML文档控制外观,自定义布局等,例如字体,颜色,边距等
可将页面的内容与表现形式分离,页面内容存放在HTML文档中,而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分
HTML与CSS的关系
HTM…CSS概述
CAscading Style Sheets(级联样式表)
CSS是一种样式语言,用于对HTML文档控制外观,自定义布局等,例如字体,颜色,边距等
可将页面的内容与表现形式分离,页面内容存放在HTML文档中,而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分
HTML与CSS的关系
HTML是网页端内容
CSS定义页面的样式
CSS基本语法
样式修饰表
行内样式表
通过标签的style属性来设置元素的样式
!--直接在行内定义样式--
p stylecolor: pink ;font-size: 10px;font-weight: bold;窗前明月光/p内嵌样式表
!--修饰所有p/p--
style type text/cssp{font-size: 16px;color: pink;}
/style在CSS文件中设置样式
可以创建一个.css文件用于保存样式
只需要在html文件中导入即可使用
link hrefcss/index.css relstylesheet/CSS选择器
标签选择器
p{font-size: 16px;color: pink;}ID选择器
#title{font-size: 16px;color: pink;
}类选择器
p class p1/p
p class p2/p
.p1{color:green;
}
.p2{color:red;
}通配选择器
可以选中匹配所有标签
*{font-family:楷体;
}选择器组合
可以为多个选择器定义相同的样式表
#title,.p1,.p2{font-family:楷体;
}选择器修饰优先级
若两个样式表对同一个内容修饰优先使用ID选择器其次类选择器最后标签选择器
CSS修饰文本
● color字体颜色
● font-size字体大小
● font-family字体
● text-align文本对齐
● text-decoration:line-through定义穿过文本下的一条线
● text-decoration:underline定义文本下的一条线
● text-decoration:none定义标准的文本
● font-style: italic;斜体文本
● font-weight:字体粗细
● line-height:设置行高
● letter-spacing可以指定字符间距
● text-indent用来设置首行缩进CSS修饰背景
● background-color背景颜色
● background-image背景图片
● background-repeat背景重复
● background-size背景尺寸
● background- position 背景位置CSS修饰列表
CSS 列表属性可以放置、改变列表项标志或者将图像作为列表项标志 。
● list-style-image 将图象设置为列表项标志。
● list-style-position 设置列表中列表项标志的位置。
● list-style-type 设置列表项标志的类型。
● list-style 简写属性。CSS伪类
CSS伪类专门用来表示标签的一种特殊的状态当我们需要为处在这些特殊状态的标签设置样式时就可以使用伪类
:hover伪类表示鼠标移入的状态
:active表示的是被点击的状态
:focus向拥有键盘输入焦点的标签添加样式。/*当鼠标放在标签上*/
a:hover{color:blue;background-color:aqua;}
/*当鼠标点击标签时*/
a:active{color:yellow;
}
/*向拥有鼠标焦点的标签进行修饰*/
.txt1:focus{background-color:aqua;
}透明
定义透明效果的属性是opacity
opacity 属性设置标签的不透明级别 值为1。
规定不透明度从 0.0 完全透明到 1.0完全不透明。块级,行级,行级块标签
块级标签
无论内容多少,都会独占一行
可以设置宽高,通过width和height
例如 行级标签
只占自身大小的标签,不会占一行
例如
行级块标签
不占一行,可以设置宽高
例如
Display
block 设置标签为块标签
inline 设置标签为行级标签
inline-block 设置标签为行级块标签
none 隐藏标签标签将在页面中完全消失)div和span
div和span都是纯净的标签,用于方便对其进行修饰
div
div是块级标签,没有任何附加样式,可以放置任何标
divdiv是一个纯净版的块级标签
/divspan
span是行级标签,是一个纯净版的行级标签
