Home > Article > Web Front-end > CSS units, values and styling tips shared
CSS units, values and styling tips shared
- 高洛峰Original
- 2017-03-09 10:40:451332browse
1. Units and values
1.1 Color value
Color settings in web pages are very important, including font color (color ), background color (background-color), border color (border), etc. There are many ways to set the color:
1. English command color
Frequently used in the previous sections This is the setting method:
p{color:red;}
2. RGB color
This is consistent with the RGB color in photoshop, consisting of R(red), Use the ratio of the three colors G (green) and B (blue) to match the color.
p{color:rgb(133,45,200);}
The value of each item can be an integer between 0 and 255, or a percentage between 0% and 100%. Such as:
p{color:rgb(20%,33%,25%);}
3. Hexadecimal color
This color setting method is more common now The principle of the method used is actually RGB setting, but the value of each item is changed from 0-255 to hexadecimal 00-ff.
p{color:#00ffff;}
Color table: 
1.2 Length value
Summary of length units, currently Px (pixel), em, and % are commonly used. It should be noted that these three units are actually relative units.
1. Pixel
Why is pixel a relative unit? Because pixels refer to small dots on the display (the CSS specification assumes "90 pixels = 1 inch"). The actual situation is that the browser will use the actual pixel value of the display. At present, most designers tend to use pixels (px) as the unit.
2. em
It is the font-size value of the given font of this element. If the font-size of the element is 14px, then 1em = 14px; if the font-size is 18px, then 1em =18px. The following code:
p{font-size:12px;text-indent:2em;}
The above code can realize the indentation of the first line of the paragraph by 24px (that is, the distance between the two font sizes).
Pay attention to a special case below:
But when the unit of font-size is set to em, the calculation standard at this time is based on the font-size of the parent element of p. The following code:
html:
Take this example as an example.
css:
p{font-size:14px}
span{font-size:0.8em;}
Font in result span "Example "The font size is 11.2px (14 * 0.8 = 11.2px).
3. Percentage
p{font-size:12px;line-height:130%}
Set the line height (line spacing) to 130% of the font (12 * 1.3 = 15.6px).
2. Style setting skills
2.1 Horizontal centering - inline elements
In actual work, we often encounter scenarios where we need to set horizontal centering. For example, for the sake of aesthetics, the title of an article is generally displayed horizontally and centered.
Here we have two different situations: inline elements or block elements. Block elements are divided into fixed-width block elements and variable-width block elements. Today we will first learn how to horizontally center downward elements?
If the element being set is an inline element such as text or picture, horizontal centering is achieved by setting text-align:center to the parent element. (Parent element and child element: In the following html code, p is the parent element of the text "I want to display it horizontally and centered in the parent container". On the contrary, this text is the child element of p) The following code:
html code:
<body>
<p class="txtCenter">我想要在父容器中水平居中显示。</p>
</body>
css代码：
<style>
.txtCenter{
text-align:center;
}
</style>
When set When the element is a block element, text-align: center will not work. In this case, there are two situations: fixed-width block elements and variable-width block elements.
In this section, we will first talk about fixed-width block elements. (Fixed-width block elements: The width of block elements is a fixed value.)
Elements that meet the two conditions of fixed width and block can be realized by setting the "left and right margin" value to "auto" Centered. Let’s look at an example of setting the p block element to be horizontally centered:
html code:
<span style="font-family: 楷体; font-size: 14pt;"><body>
<p>我是定宽块状元素，哈哈，我要水平居中显示。</p>
</body>
css代码：
<style>
p{
border:1px solid red;/*为了显示居中效果明显为 p 设置了边框*/
width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style></span>
也可以写成：
margin-left:auto;
margin-right:auto;
注意：元素的“上下 margin” 是可以随意设置的。
2.3 不定宽
在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：
加入 table 标签
设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的
这一小节我们来讲一下第一种方法：
为什么选择方法一加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
举例如下：
html代码：
<span style="font-family: 楷体; font-size: 14pt;"><p>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</p>
css代码：
<style>
table{
border:1px solid;
margin:0 auto;
}
</style></span><span style="font-family: 楷体; font-size: 14pt;"> </span>
除了上一节讲到的插入table标签，可以使不定宽块状元素水平居中之外，本节介绍第2种实现这种效果的方法，改变元素的display类型为行内元素，利用其属性直接设置。
第二种方法：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。如下例子：
html代码：
<body>
<p class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</p>
</body>
css代码：
<style>
.container{
text-align:center;
}
/* margin:0;padding:0（消除文本与p边框之间的间隙）*/
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
margin-right:8px;
display:inline;
}
</style>
这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。
除了前两节讲到的插入table标签，以及改变元素的display类型，可以使不定宽块状元素水平居中之外，本节介绍第3种实现这种效果的方法，设置浮动和相对定位来实现。
方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
我们可以这样理解：假想ul层的父层（即下面例子中的p层）中间有条平分线将ul层的父层（p层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（p层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是p层的平分线）对齐，从而实现li层的居中。
代码如下：
<body>
<p class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</p>
</body>
css代码：
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>
这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方法，可以视具体情况而定。
The above is the detailed content of CSS units, values and styling tips shared. For more information, please follow other related articles on the PHP Chinese website!