tofacebook.com -专业IT技术社区 【百家号】脸书百科,CSS基本语法 Web程序 - tofacebook.com-专业IT技术社区
74°

【百家号】脸书百科,CSS基本语法 Web程序

标签:行高   设定   颜色   css3   lock   sed   文件   classname   像素   

1.CSS使用

  • link 引入外部的CSS文件

  • <link rel="stylesheet" type="text/css" href="./style.css">
  • <style></style> 在html中写

  • <style> p { color:red } </style>
  • 使用html元素的style属性

  • <p style="color:red;"</p>

 

2 CSS格式组成

 

  • 选择器 负责圈定范围,要修改的元素集合 声明 由属性名和属性值组成,中间用冒号连接(属性名:属性值),用于设定具体样式
  • CSS由选择器和一或多个声明组成,多个声明之间用分号
选择器{ 属性名:属性值; 属性名:属性值; }

4.3 CSS注释

/*注释内容*/

4.4 CSS基本长度单位

  • em 倍数 默认字体大小的倍数
  • px:pixel,像素,屏幕上显示的最小单位,用于网页设计,直观方便;%
  • 百分比
  • pt:point,是一个标准的长度单位,1pt=1/72英寸,用于印刷业,非常简单易用;
  • cm 厘米
  • mm 毫米

4.5 CSS 颜色单位

colorName: red/green/bue/purple/orange/yellow/pink/skyblue

rgb数字 rgb(34,45,23) rgb(20%, 57%, 100%)

16进制 #abcdef #f90 #ccc

background-color: rgb(100, 200, 50);
background-color: rgb(100%, 50%, 10%);

background-color: #ab1234;
background-color: #abcdef;

 

5 CSS选择器

首先要清楚的一点:任何元素都有class和id

标签名选择器
tagName {

}

h1 {
color: green;
font-size: 60px;
}

类名
.className {

}

技术分享图片
 1 /*CLASS选择器*/  2  .first-item {  3  width: 900px;  4  }  5 
 6  .item {  7  width: 700px;  8  padding: 20px;  9  border: 1px solid #369; 10  } 11         <p class="item">撒旦萨芬记录卡是否健康拉法基</p>
12         <p class="first-item item">撒旦萨芬记录卡是否健康拉法基</p>
类选择器

 

ID选择器
#idName {

}

技术分享图片
/*ID选择器*/ #myFriend { color: #f90; } /*<p id="myFriend">撒旦萨芬记录卡是否健康拉法基</p>*/
ID选择器

 

全局选择器(作用于所有的元素)
* {

}


 组合 后代元素
选择器 选择器

.list li {
border: 1px solid orange;
}

 组合 子元素
选择器>选择器 找list元素下的内容,然后找list的子元素,如果子元素li下面还有元素,不会被修改样式。

.list>li {
border: 1px solid orange;
}

 群组
选择器,选择器,选择器

/*群组选择器 或者 or*/
h1,hr,p,.item {

}

 多条件
p.item

p元素下的class = "item"的

6 选择器优先级

ID > CLASS > tagName > *

组合选择器 数数

 

7 CSS属性 常用

字体

  • font-family

  • font-size

  • font-weight normal/bold

  • font-style normal/italic

  • font-variant normal/small-caps

  • font 复合属性

 

颜色

  • color

 

文本

  • word-spacing

  • letter-spacing

  • text-align: left / center /right

  • vertical-align: baseline / middle ....

  • line-height 行高

  • text-decoration : none/overline/underline/line-through

  • text-indent: 2em

  • word-wrap: break-word

  • overflow-wrap word-wrap的别名 CSS3

  • white-space pre pre-wrap

 

 

 

 

 

CSS基本语法

标签:行高   设定   颜色   css3   lock   sed   文件   classname   像素   

原文地址:https://www.cnblogs.com/Roc-Atlantis/p/9374626.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: