CSS(Cascaading Style Sheets)层叠样式表
目录
主要控制样式的使用关系。
控制页面的布局(layout),元素的样式(style)
1.学习引入CSS的样式
内部样式
body这个元素以及body的子元素都要应用这个规则,把背景改为黄色
外部样式
内联样式
代码风格
更建议第二种
CSS不区分大小写,但是开发时统一用小写
空格规范:
冒号后面带空格选择器和{之间也有个空格
选择器(selector),按照一定的规则把元素选择出来
1.元素原则器 p{....}文档中的所有p标签听我号令
a{.....}文档中的所有a标签听我号令
2.ID选择器
#some=value {....} 找到文档中,元素属性的id是some-value的元素听我号令
3.类(class)
选择器 .some-class{......}
说明这个元素有俩个类,一个title 一个other-class
4.全部选择器
*{...} 文档中所有元素,听我号令
5.并列关系
p,h1{...} 把所有的p和h1听我号令
6.下级
#some-id p{...} 先找到#some-id,在它的所有子孙中,找到p标签
#some-id p{...} 先找到#some-id,在它的所有孩子中,找到p标签,不涉及孙子辈
字体属性:
2.1设置字体
a.字体样式
写俩个字体的意思是,如果用户由宋体就显示宋体,没有宋体就显示幼圆
b.字体大小
显然body是p的父类, 从父类继承下来的基础上改变的的倍数
粗细
font-weight: bold;
fond-weight: 700;
c.文字样式
italic 斜体
d.字体颜色
第一种方法:color : yellow;
第二种方法:color : #000000;
写颜色时,如果全是F,可以写为color: #fff;
第四种方法:color: rgb(100,150,255);
透明度 0 完全透明 1 一点都不透明
color: rgba(100, 150, 255, .7)
文本对齐
文本修饰
文本缩进(了解)
代码缩进 code indent
行高
指的是上下文本行之间的基线问题
关于背景
背景图片:
线性渐变
成30度角渐变,有红变蓝,也可以30deg,red,blue,green
径向渐变
背景平铺
就是图片在x,y上平铺
background-position: center;表示图片出现在中间背景尺寸
background-size:cover; 图片全覆盖
后三行代码可以做出类似于信纸格的东西,很美观
盒子样式
a.边角设置
border-radius: 24px; //可以让盒子的边框变圆,当长和宽相等时可以变成一个圆 border-radius: 20px 50px; //左上角20,右上角50border-radius: 20px 50px;//也可以这样写
border-radius: 50%;
更多样式可以在mdn上面搜
![]()
![]()
点上去之后就会变圆,transition:动画持续时间
块级元素
div:会换行,所以是块级元素
a:不会换行,不是块级元素,但是可以更改,在CSS中写display:block的时候就是块级元素
块级元素有宽和高,而行级元素只有宽没有高
若把块级元素改为内联元素 display :inline;宽高就会失效
body{ height: 30px; } #box1{ height:100px; background-color: palevioletred; }
就是把body改为30px之后,box1也会变为30px,会跟着父亲变化,但是可以强行指定(宽高都写)的
如果不写高度,就是空白的,但是写上文字换行都会被撑开。
行级元素
a{ width: 100px; height: 100px; background: orange; display: block;// 去掉这一行,宽高就是没有用的,只有写上才能成为块级元素 transition:0.2s ; }
边界只有左右是有效的,上下无效
display:inline-block //不换行但是具备了宽高的能力
margin 盒子和盒子的间距
border 边界
padding 盒子里面的棉花
可以在这里查看
![]()
当盒子设为box-sizing 就是包括边距和内边界加起来30px。如果不写就只是盒子30px,其他的加上会变大。
去除浏览器默认样式
*{
margin:0;
padding:0;
}
弹性布局
总结:
题外话
元素部分,上面是看html,下面是看css
总结: