CSS

1. inline style(内联样式)​

<h2 style="color: red；">兔子</h2>​

2. CSS

<!-- 元素选择器-->
<style type="text/css">
  h2 {
    color: red;
  }
</style>

<!-- 类选择器-->

<style>
  .blue-text {
    color: blue;
  }
</style>
<h2 class="blue-text">兔子</h2>
<p class="blue-text">小兔子是很可爱的动物</p>

<!-- id选择器-->
#para1
{
    text-align:center;
    color:red;
}

 

<!--
使用属性选择器设定样式
除了 ID 选择器和 Class 选择器,另外，也还有属性选择器，可以让我们给特定的元素设置样式。

语法:

[属性名 过滤符号 属性值] {}
例如，下面的代码会改变所有元素中包含type属性且值为radio的元素的外边距。
-->
[type='radio'] {
  margin: 20px 0px 20px 0px;
}

 

3. 设置字体大小

在CSS中，通过 ​font-size​ 属性来设置元素中所包含文本的字体大小。

预定义关键字

有 xx-small、x-small、small、medium、large、x-large、xx-large，尺寸按顺序依次增大，类似于衣服的尺寸。

 

绝对尺寸

有px（像素）、pt（点，1pt 相当于 1/72in）、in（英寸）、cm（厘米）、mm（毫米）等。

 

相对尺寸

有 em、%、rem，它们都是相对于某个参考基准的字体大小，来计算当前字体的大小，只是参考基准不同而已。

 

比较常用的单位有 px，%， rem；

4. 字体

通过font-family属性，可以设置元素里面的字体样式。

5. 设置图片宽高

width height

6.设置边框 border-style border-color border-width border-radius

p { border:5px solid red; }

p.none {border-style:none;}

p.dotted {border-style:dotted;}

p.dashed {border-style:dashed;}

p.solid {border-style:solid;}

p.double {border-style:double;}

p.groove {border-style:groove;}

p.ridge {border-style:ridge;}

p.inset {border-style:inset;}

p.outset {border-style:outset;}

p.hidden {border-style:hidden;}

 <p class="none">无边框。</p>

<p class="dotted">虚线边框。</p>

<p class="dashed">虚线边框。</p>

<p class="solid">实线边框。</p>

<p class="double">双边框。</p>

<p class="groove"> 凹槽边框。</p>

<p class="ridge">垄状边框。</p>

<p class="inset">嵌入边框。</p>

<p class="outset">外凸边框。</p>

<p class="hidden">隐藏边框。</p>

 

​

我们将​ .smaller-image​ 的宽度和高度设置成一致, 当 ​border-radius:50%;​ 时得到圆形图片,

如果图片本身是长方形的,那么得到的是椭圆形图片。

7.添加背景色

background-color

8.样式中的优先级

CSS 优先规则1： 最近的祖先样式比其他祖先样式优先级高。

CSS 优先规则2："直接样式"比"祖先样式"优先级高。

CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

CSS 优先规则4：属性后插有 !important 的属性拥有最高优先级。

CSS 优先规则5：第二个声明始终优于第一个声明。