基础选择器

标签选择器

1.选中的是一类标签,而不是单独一个

<p>Hello,world</p>

 p {
      /* 文字颜色 */
      color: #ff857f;
      /* 文字大小 */
      font-size: 30px;
      /* 背景颜色 */
      background-color: #fff;
      /* 宽度 */
      width: 200px;
      /* 高度 */
      height: 100px;
   }

类选择器

1.类名可以由数字、字母、下划线、中划线组成
2.一个标签可以同时有多个类名,类名之间以空格隔开
3.类名可以重复,一个类选择器可以同时选中多个标签

<p class="pink">粉色</p>
<p class="yellow">黄色</p>
<p class="blue">蓝色</p>

        .pink {
            color: pink;
        }

        .yellow {
            color: yellow;
        }

        .blue {
            color: skyblue;
        }

id选择器

1.id属性值在一个页面中是唯一,不可重复的
2.所有标签都有id属性
3.一个标签只能有一个id属性值
4.一个id选择器只能选中一个标签

<p id="green">绿色</p>
<p id="orange">橙色</p>

        #green {
            color: yellowgreen;
        }

        #orange {
            color: tomato;
        }

通配符选择器

1.全部标签都会更改样式
2.不需要调用,自动给所有元素使用样式
3.特殊场景才使用(清除所有元素标签内外边距)

          * {
            margin: 0;
            padding: 0;
           }

字体属性

字体大小:font-size(chrome默认文字大小16px)

<p>Hello,world</p>

        p {
            font-size: 20px;
        }

字体粗细:font-weight

1.normal:正常字体=400
2.bold:粗体=700
3.bolder:特粗体
4.lighter:细体

<p>Hello,world</p>

        p {
            font-weight: 700;
        }

字体样式:font-style

1.normal:正常字体(默认值)
2.italic:斜体

<p>Hello,world</p>

        p {
            font-style: italic;
        }

字体系列:font-family

1.从左往右按顺序查找,如果电脑中未安装该字体,则显示下一个字体
2.如果都不支持,此时会根据操作系统,显示最后字体系列的默认字体
3.具体字体:"Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等
4.字体系列:sans-serif、serif、monospace等

<p>Hello,world</p>

        p {
            font-family: "Microsoft YaHei";
        }

样式的层叠

如果给同一个标签设置了相同的属性,此时样式会层叠,写在最下边的会生效

复合属性:font

1.按顺序书写,并以空格隔开
2.顺序:style weight size family
3.只能省略前两个,后两个不要省略(如果省略了取值,相当于设置了默认值)
4.如果需要同时设置单独和连写形式,要么把单独的样式写在连写的下面,要么把单独的样式写在连写的里面

<p>Hello,world</p>

        p {
            font: italic bold 20px 宋体 serif;
        }

文本属性

文本缩进:text-indent

1.数字+px

 p {
     text-indent: 32px;
   }

2.数字+em 1em=当前标签的font-size的大小

  p {
     text-indent: 2em;
   }

文本修饰:text-decoration

1.underline:下划线

<p>Hello,world</p>

 p  {
      text-decoration: underline;
   }

2.overline:上划线

<p>Hello,world</p>

  p  {
      text-decoration: overline;
   }

3.line-through:删除线

<p>Hello,world</p>

   p  {
       text-decoration: line-through;
   }

4.none:无装饰线

 <a href="#">chrome</a>

        a {
            text-decoration: none;
        }

文本水平对齐方式:text-align

1.left:左对齐
2.center:居中对齐
3.right:右对齐
注:给文本所在标签的父元素设置

<div class="title">
        <a href="#">chrome</a>
    </div>

.title  {
         text-align: center;
         width: 100px;
         height: 100px;
         background-color: rgb(184, 245, 124);
         margin: 0 auto;
        }

css-Day1