web开发------CSS

CSS(Cascaading Style Sheets)层叠样式表

目录

1.学习引入CSS的样式

内部样式

外部样式

内联样式

 代码风格

 空格规范:

选择器(selector)，按照一定的规则把元素选择出来

1.元素原则器   p{....}文档中的所有p标签听我号令

2.ID选择器   

3.类（class）

 4.全部选择器 

5.并列关系 

6.下级 

字体属性：

 2.1设置字体

a.字体样式

b.字体大小

c.文字样式

d.字体颜色

文本对齐

 文本修饰

 文本缩进（了解）

行高

---

主要控制样式的使用关系。

控制页面的布局(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，右上角50

border-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 

总结：