CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表,它就会按照这个样式表来对文档进行渲染。
每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。
选择器 {属性:属性值;属性:属性值;属性:属性值;}
案例:(style中的span对应的是body中的标签span)
/*注释*/
1.行内样式
直接在标签的style属性中设定CSS样式
2.内部样式
将CSS样式写在网页的<head></head>标签对的<style></style>标签对中,
3.外部样式
将css写在一个单独的文件中,然后在页面进行引入即可
(1)标签选择器
span {color : blue}
所有span标签都渲染成blue色
(2) id选择器
id为oo的标签里所有内容被渲染成蓝色
(3)类选择器
类为cl的标签渲染成红色,书写的时候格式为.cl
(4)通用选择器
将所有未被渲染的标签渲染成绿色
(1)后代选择器
将标签div内部的span标签设置成蓝色
(2)儿子选择器
将标签div内部第一层span标签设置成蓝色
(3)毗邻选择器
对div标签下面第一个span标签进行渲染
(4)弟弟选择器
对div标签下所有同级的span标签进行渲染
(1)选择属性为xxx的标签
(2)选择属性为xxx且属性值为2的标签
(3)选择属性为xxx且属性值为2的p标签
(1)分组
多个元素都使用相同的样式时,可以合并成一个组,通过选择器之间添加逗号实现,如下
将div标签和p标签统一设置字体为蓝色
(2)嵌套
多种选择器可以混合起来使用
对cl类内部的所有span标签渲染
操作a标签时候的四种状态
input输入框获取焦点时样式
行内样式 > id选择器 > 类选择器 > 标签选择器
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度,内联标签的宽度由内容来决定。
字体大小:font-size
字体粗细:font-weight
lighter 更细
bold 粗体
bolder更粗
文本颜色:
可以通过三种方式制定:
16进制:#FF0000
颜色名字:red
RGB值:rgb(255,0,0)
另:rgba(255,0,0,0.5) 最后一个值制定了颜色的透明度
文字对齐:
text-align 属性规定元素中的文本的水平对齐方式
如表示右对齐
文字装饰:
text-decoration 属性用来给文字添加特殊效果
如表示添加下划线
如表示给a标签去掉下划线
/*背景颜色*/
p{background-color: green;}
/*背景图片*/
p{background-image: url("1.png");}
/*背景图片只在水平方向上平铺*/
p{background-repeat: repeat-x;}
/*背景位置*/
p{background-position: left;}
边框属性
border-width
border-color
border-style
书写格式:
p{border-width: 3px;
border-color: red;
border-style:solid;}
简写格式:
p{border: 3px red solid;}
用border-radius属性能实现圆角边框的效果。
将border-radius设置为长或高的一半即可得到一个圆形。
display: none;#标签不显示
display:"block"#将行内标签变为块级标签
display: inline;#将块儿级标签变成行内标签
display: inline-block;#将选择的标签既具有行内标签特点又有块儿级标签的特点
原文:https://www.cnblogs.com/zhangdajin/p/10945510.html