前端语言——CSS(二)| 青训营

84 阅读2分钟

二、CSS代码风格

2.1 样式格式书写

    1. 样式格式书写
        1.紧凑格式   
            h3 { color: deeppink;font-size: 20px;}
        2.展开格式   
         h3 {
            color: pink;
            font-size: 20px;    
         }
    2. 样式大小写风格
        1.小写格式
            h3 {
                color: pink;
            }
        2.大写格式
             H3 {
                COLOR: PINK;   
            }
    3. 样式空格风格
        1. h3 {
            color: pink;    
        }

2.2 CSS选择器的作用

答:选择器就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说,就是选择标签用的。

h1{color:red;font-size:25px}

h1是选择器,color为属性,red为值,整体为声明,font-size为属性,25px为值

找到所有的 h1 标签。 选择器(选对人) 设置这些标签的样式,比如颜色为红色(做对事)

2.3 选择器总结

image.png

三、CSS字体属性

3.1 字体大小:

CSS 使用 font-size 属性定义字体大小。

     p {  
        font-size: 20px; 
    }

1.px(像素)大小是我们网页的最常用的单位

2.谷歌浏览器默认的文字大小为16px

3.不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小

4.可以给 body 指定整个页面文字的大小

3.2 字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细。

    p {  
        font-weight: bold; 
    }

3.4 字体的综合写法

body {   font: font-style  font-weight  font-size/line-height  font-family;}

使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开 不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用

感受

CSS主要是用来对页面的样式进行设计。我们可以通过运用CSS技术来设计出我们想要的页面效果,并且CSS是与HTML内容是分开的,这极大地方便了我们阅读、修改程序,也使得CSS具有一定的重复使用的特性,只需要在html文件中引入CSS文件即可,这对设计者来说十分方便的。除此以外,CSS比较容易学习但是如果想要使用的非常自然、熟悉的话是比较困难的,需要不断的运用、尝试才能设计出最具有自我特色的html页面。因此,学习CSS不仅要学它的使用,更要学习如何合理的运用到你想要表达的页面当中去,打造一个属于你自我特色的页面,这种实践内容才是我们学习的目的,才能促进我们不断进步。