样式的定义方式为:
选择器 { 属性1: 值1; 属性2: 值2; ... }
其中,选择器可以是元素选择器(如p、h1、div等),也可以是类选择器、标识符选择器、伪类选择器等。属性是需要改变的样式属性,如color、font-size、background-color等。值是这些属性的具体值,如red、14px、#fff等。
下面是一些用元素选择器定义样式的例子:
/*给所有段落设置红色字体*/ p { color: red; } /*给所有标题设置蓝色字体*/ h1, h2, h3, h4, h5, h6 { color: blue; } /*给所有链接设置绿色字体*/ a { color: green; }
还可以使用类选择器、标识符选择器等来定义样式。下面是一个使用类选择器定义样式的例子:
/*定义一个类为highlight,给这个类的元素设置黄色背景和黑色字体*/ .highlight { background-color: yellow; color: black; } /*HTML中使用highlight类*/ <p class="highlight">这是一个高亮段落</p>
通过CSS,大家可以实现网页布局的各种效果,如响应式布局、网格布局、弹性布局等。下面是一个用弹性布局实现的水平居中的例子:
/*给父元素设置display: flex和justify-content: center实现水平居中*/ .container { display: flex; justify-content: center; } /*HTML中使用container类*/ <div class="container"> <p>这是一个居中的段落</p> </div>
总之,CSS是一种定义网页样式的强大语言,掌握它可以让大家实现各种酷炫的效果!