目录
CSS基本语法规则:选择器 + 若干属性声明
大括号里是CSS的属性,可以写一个也可以写多个,每个属性都是一个键值对,键和值之间用:分割.键和值之间用;分割,每个键值对可以独占一行,也可以不独占.
有3种写CSS的方式 :
1.内部样式:使用style标签,直接把CSS写到html文件中,此时的style标签可以放到任何位置,一般建议放到head标签里.
2.内联样式:使用style属性,针对指定的元素设置样式.(此时不需要写选择器,直接写属性键值对),这个时候样式只对当前元素生效.
3.外部样式:把css代码单独作为一个.css文件,在通过link属性,让html引入该css文件(在head中加入link标签).
实际开发中,一般是使用外部样式来写css,让html和css分离开,相互不影响.
内连样式的优先级高于内部样式.
CSS选择器
1.标签选择器
在 { 前面写标签名字,此时意味着选中当前页面中所有的指定标签.
2.类选择器
创建css类,手动指定哪些元素应用这个类.css中的类和Java中面向对象的类无关,css所谓的类就是把一组css属性起了个名字,方便引用.
定义类,使用 . 开头,引用这个类,通过class属性 = "类名",不需要带 .
一个类可以被一个元素引用,也可以被多个元素引用;一个元素可以引用一个类,也可以引用多个类.
3. ID选择器
html页面中的每个元素,都可以设置一个唯一的id,作为元素的身份标识.
给元素设置id后,就可以通过id来选中对应的元素.
类选择器,可以让多个元素应用同一个类.
id选择器,只能针对唯一的元素生效,因为一个页面里,只能有唯一的id.
上述三个选择器,都是简单的基础选择器
复合选择器,基础选择器的组合
4.后代选择器
把多个简单的基础选择器,组合一下.(可以是标签,类,id 选择器的组合)
ul li{} 含义就是:先找页面中的ul,然后再这些ul里再找所有的li,li是ul的后代即可,不一定非得是"子元素".(包含子元素,孙子元素......)
5.子选择器
简单基础选择器的组合,只是找匹配的子元素,不找孙子元素之类的.
表示方法:
选择器1>选择器2 { 属性}
只在.one 的子元素里找li标签.
6.并集选择器
选择器1,选择器2{属性}
这是针对多组选择器,应用了同样的样式.
7.伪类选择器
复合选择器的特殊用法.前面的选择器是选中某个元素,伪类选择器是选中某个元素的某个特定状态.
:hover 鼠标悬停时的状态 :active 鼠标按下时的状态
CSS常用属性
字体属性
1.设置字体家族
font-family 当前使用哪种字体,指定的字体必须是系统已经安装了的.
2.设置字体大小
font-size 浏览器的每个文字,可以视为一个方框,如果是英文阿拉伯数字,方框比较窄,如果是中文,一般是一个正方形.
3.设置字体粗细
font-weight 实际设置值的时候,有两种方式:使用单词或者使用数字
数字:1-1000之间的<number>类型值,更大的数值代表字体重量粗于更小的数值(或一样粗).
单词:normal(正常粗细,与400等值),bold(加粗,与700等值),lighter(比从父元素继承来的值更细),bolder(比从父元素继承来的值更粗).
4.文字倾斜
font-style 让文字倾斜.
文本属性
5.字体颜色
color 计算机表示颜色,一种典型方式RGB(红绿蓝)的表示方式,前端中给RGB各分配一个字节,每个字节的范围0-255/00-FF.通过这三个分量不同比例的搭配,就可以调和出不同的颜色.
如果每个分量的两个十六进制数相同,就可以缩写成3位十六进制数.(#ff0000=>#f00)
6.文本对齐
text-align 属性来设置对齐方式.(靠左靠右居中)
7.文本装饰
text-decoration
8.文本缩进
text-indent, 每个段落首行缩进个文字:text-indent: 2em.
px 是绝对的量,em是一个相对的量,是以文字尺寸为基础来设置.(假设文字是40px,1 em就是40px,0.5em就是20px)
文本缩进也可以是负数,向左缩进.
9.行高
line-height: [值]; 行高:文字高度+行间距(上间距+下间距),上下间距是相等的.
10.背景颜色
background-color,默认是透明的.
11.背景图片
background-size 设置背景图尺寸
12.圆角矩形
使边框带有圆角效果,更加美观.
border-radius:length.
元素的显示模式
display
display:block; 块级元素
display:inline; 行内元素
任何一个html标签的显示模式(块级/行内)都是可以设置的.
关于块级元素和行内元素的区别:
1.块级元素独占一行,行内元素不独占一行.
2.块级元素的高度,宽度,内外边距都是可以设置的.行内元素,高度宽度行高无效,内边距有效外边距有时候有效有时候无效.
3.块级元素默认宽度和父元素一样宽,行内元素默认宽度和里面的内容一样宽.
总结:块级元素比较正常,行内元素容易出问题.一般如果需要,都会把行内元素转换成块级元素.
CSS盒子模型
任何一个html元素都是一个矩形的盒子,盒子里面可以放内容.
content:内容 border:边框 padding:内边距 margin:外边距
border属性,直接设备了四个方向.还可以使用 border-left,border-right,border-top,border-bottom
设置边框要设置三个方向:1.边框的粗细2.边框的颜色3.边框的风格(实线,虚线...)
边框默认情况下会撑大盒子,weight和height表示的是内容部分的尺寸.
撑大盒子可能会影响该元素其他元素的相对位置,可以使用专门的属性防止盒子被撑大.
box-sizing:border-box.设置了该属性此时边框就不会在撑大盒子.
内边距:
外边距:设置的是元素和元素之间的距离.
特殊用法:margin-left和margin-right设置为auto(浏览器自动调节).此时该元素就在父元素内部居中位置.
弹性布局
解决水平方向排列问题.
行内元素虽然是在水平方向上排列的,但是不适合水平布局,因为尺寸边距都不可控.
因此使用弹性布局是更合适的.
如果我们这样设置,可以发现此时span'的宽度并没有生效.
使用弹性布局:
1.开启弹性布局
给要水平排列的元素的父元素,设置flex.此时弹性容器里面的元素,不再是"块级元素""行内元素",而是成为了弹性元素,是遵守弹性布局的,就可以设置尺寸和边距了.
span的宽度生效了.
2.设置这些元素的水平排列方式.
靠左排列:justify-content: flex-start;
靠右排列:justify-content: flex-end;
居中排列:justify-content: center;
justify-content: space-around;
justify-content: space-between;
3.设置元素垂直方向的排列方式
使用align-items属性.
1940
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
