CSS简介

2022-01-25 14:32:26 阅读：115 来源： 互联网

选择器：

基础选择器：

选择器 { 样式 }

给谁改样式，改什么样式

标签选择器：写上标签名

p {
      color: rgb(248, 82, 82);
      font-size: 25px;
      /* 修改文字大小为12像素 */
    }
    h2 {
      color: rgb(11, 236, 187);
    }

类选择器：可单独选择一个或某几个标签。

样式(.)点定义，结构类（class）调用，一个或多个，开发最常用

 .blue {
      background-color: #cc00ff;
    }
    .zi
    /* 自己起的，不要使用纯数字或中文命名 */
      {
      color: rgb(149, 10, 241);
    }

    .yellow {
      color: rgb(200, 255, 0);
    }

    .box {
      width: 100px;
      height: 100px;
    }

    .div {
      color: rgb(149, 10, 241)
    }

id选择器：样式#定义，结构id调用，只能用一次。

#pink {
      color: pink;
    }

通配符选择器：用*定义，它表示选择页面中的所有元素

* {
      color: red;
    }

字体

字体类型

注意：

各字体必须用英文逗号隔开

如果有空格隔开的字体加引号

尽量使用系统默认自带字体

h2 {
      font-family: "microsoft Yahei";
    }
 p {

      font-family: "microsoft Yahei", Arial;
    }

字体大小

标题标签比较特殊，需要指定文字大小

p {
      font-size: 20px;
    }

 .body {
      font-size: 16px;
    }

字体粗细

font-weight字体： normal：正常字体

bold:加粗

bolder:特粗

lighter：细体

number

.bold {
      font-weight: bold;
    }

    .cu {
      font-weight: 700;
      /*700变粗  */
    }
    
    .normal {
      font-weight: 400;
      /*400=normal  */
    }

字体样式

p {
      font-style: italic
        /* 文字倾斜 */
    }

    em {
      font-style: normal;
      /* 倾斜回复 */
    }

复合属性

.div {
      /* font:font-style  font-weight  font-size/line-height  font-family */
               /*样式           粗细          大小、行宽           字体  */
      font: italic 400 16px "microsoft yahei"
    }

    /* 样式，粗细，行宽都可以省，但大小、字体不可省 */
    /* 如：font:16px "Microsoft yahei" */

文本

对齐方式

text-align:center居中对齐

text-align:left 左对齐

text-align:right 右对齐

 h2 {
      text-align: center;
    }

文本装饰

none:默认，没有装饰线（最常用）

underline：下划线（常用）

overline：上划线（几乎不用）

line-through：删除线（不常用）

.underline {
      text-decoration: underline;
    }

    img {
      /* 取消链接默认的下划线 */
      text-decoration: none;
    }

文本缩进

text-indent 文本首行缩进

text-indent:20px(精确)

1em=当前元素一个文字大小

 p {
      text-indent: 2em;
    }

行间距

行间距（上间距文字高度下间距）

上间距=(行高-文本高度)/2

div {
      line-height: 25px;
    }

CSS引入方式

1.内部样式表 <style> </style> 一般放在

2.行内样式表 <div style="color:red;font-size:12px;">引入方式</div> <head></head>中

3.外部样式表

（1）单独写一个CSS文件，后缀名为CSS 把CSS代码放入其中写样式

（2）在HTML页面中，使用 <link>标签引入这个文件

复合选择器

一.后代选择器

中国山东济南

1. ol li { }

2.ol li a { }

3.元素1 元素2{ }

4. .nav li a { }

二.子元素选择器

.nav>a{ }

元素一与元素二为父子关系，孙子不选

三.并集选择器

元素1，元素2{ }

div,

.pig li { }

四.伪类选择器

a:link 选择所有未被访问的链接

a:link{
  color:black;
  text-decoration:none;
}

a:visited 选择所有已被访问的链接、

a:visited {
  color:orange;
}

a:hover 选择鼠标指针位于其上的链接

a:hover {
  color:skyblue;
}

a:active 选择活动链接(鼠标按下未弹起的链接)

a:active {
  color:green;
}

例如：

a {
  color:#333;
  text-decoration:none;
}

a:hover {
  color:#369;
  text-decoration:underline;
}

标签：color,简介,样式,字体,text,font,选择器,CSS
来源： https://blog.csdn.net/qq_64585761/article/details/122681683

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS简介

选择器：

字体

文本

CSS引入方式

复合选择器