前端基础第三天

129 阅读1分钟
1.CSS简介
 1.HTML主要做结构,显示元素内容
 2. CSS美化HTML,布局页面
 3.CSS最大价值 是由HTML专注去做结构呈现  样式交给CSS即结构与样式相分离    
1.3语法规范

24d573886e0686f7e850220630e585e.jpg

image.png

1.4css代码风格

939c6d174d67b17d070f646547211b2.jpg

2.1CSS选择器的作用

01b31131c1e04ab8a53afc618fb0923.jpg

2.3标签选择题

指用HTML标签名称作为选择器

893f78c54b2e6ec52a1850a8341afc8.jpg

7066c7a701b7733f726184cc9afb56b.jpg

image.png

2.4类选择器

b72ad84d31f370a7daac45ddbc3e447.jpg

488d7407531d06a0ac5ccf769b0d205.jpg

3ad02b308dc61ef7ca9a8737ca786a5.jpg

image.png 类选择器案例 image.png

image.png

多类名的使用

46da7bc41524cd76469a9daa107385e.jpg

ce825f4d0e34ad833c302a90951bd4c.jpg 代码复用先设定后直接使用

image.png

2.5id选择器

07823f06f55254b475b94e717cfebbe.jpg

d0da2c2cd6ab27fb0feba50d0bcc880.jpg

image.png

2.5通配符选择器

1c266d5e5f021fc6ef06799afd30fe0.jpg

image.png

c13d33a249c7f21503ce1a4e81bc304.jpg

3.1字体系列

05fe86b9a019f4db011eeb155df1d4f.jpg

b98e72205fae928da4f1629211b6871.jpg

9d50f01f392718ef8070a6afbb81ed1.jpg

image.png

3.2字体大小

80a04096f1f50ea0088f66ae7533dbe.jpg

3.3字体粗细

image.png

3.5字体复合属性

b25fb2704197711d8aaaeb6f689e301.jpg

image.png

3.6字体总结

611072c182d3a445573d7fb14ee1c23.jpg

4.CSS文本属性
4.1颜色属性

cebccd52213d5f4cf75202c71db015b.jpg

image.png

4.2对齐文本

bcf3298e63e8ec71ba0eac5ef22af6d.jpg

image.png

4.3装饰文本

b55b79ede28828b4bf3bb1c94edc44f.jpg

image.png

4.4文本缩进

11eedd24789ea7a9860b83c187cbfcd.jpg

image.png

4.5行间距

6166964ae7202174ea6d1d0933d01d5.jpg

image.png

4.6文本属性总结

b8010784ae2e734e6967e917b5dd813.jpg

5.CSS的引入方式
5.2内部样式表

76ad1d26d8ff4ffbdf43170fc6da034.jpg

5.3行内样式表

f27274ac24720fd37958b50aacdbcbc.jpg

image.png

5.4外部样式表

3aa3a32bb7ff299906b3599d747058b.jpg

image.png

image.png

总结

ecc4575d61858b276b7244f3f211a71.jpg