What is css? Introduction to three css styles and text attributes-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

What is css? Introduction to three css styles and text attributes

不言

Aug 09, 2018 pm 03:31 PM

css html

This article introduces to you what is css? The introduction of the three CSS styles and text attributes has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What is CSS?

Cascading Style Sheets, referred to as CSS, cascading style sheets.
Used to modify HTML files and perform operations such as typesetting or size control on web page elements.
In other words, the HTML file fills the content of the web page, while CSS controls the performance of the content
For example: the size of the element, the position of the element in the web page, the background of the element and other attributes.

Where is the CSS code written?

1 Inline style (inline): css code can be written in html tags, use style="css style";

<p style="color: red;">这是一个段落</p>

Copy after login

2 Internal style:

Write the css code in the style tag
In theory, the style tag can be written anywhere in the document to take effect, but we will all write the style in the head tag

<html>
    <head>        ...
        <style type="text/css">
            css样式
        </style>
    </head>
</html>

Copy after login

3 External style:

External style is to write the css code separately in In a css file (css suffix file)
Then use the link tag to introduce the external style file
There is no need for style tags in external style files, just write css code directly

<html>
    <head>        ...
        <link rel="stylesheet" type="text/css" href="css文件路径" />
    </head>
</html>

Copy after login

Three styles can be used in multiple ways at the same time

Text attribute: font attribute

1 Font size: font-size

Set the font size, use values with units, such as px, em, pt, etc.

font-size: 12px;

Copy after login

2 Font color: color

color: red;

3 Font style: font-family

Set the font, such as Song Dynasty, Yahei and the like
Can have multiple values
But only one font style is displayed
If the first font is available, use the first one, otherwise use the second one
If the second font is not available, use the third one, and so on
Fonts are separated by English commas. If the value is Chinese or multiple words, it must be enclosed in English double quotes

font-family: "宋体",Times,"New Century Schoolbook";

Copy after login

4 Font-weight: font-weight

##normalDefault value , no boldbold##boldervalue

font-weight: bold;

Copy after login

Optional values	Description


bold, the effect is better than Bold is more obvious
100~900 is a value without units. Generally, 100~500 is the normal effect, and 600~900 is bold. The larger the value, The bolder the font

5 The case of the text: text-transform

can Selection value##noneDefault value, no effectcapitalizeFirst letter capitalizeduppercaseAll capslowercaseAll lowercase

text-transform: capitalize;

Copy after login

6 Text horizontal alignment: text-align

Description

Yes Selection valueDescriptionleftDefault value, left alignedrightAlign rightcenterAlign centerjustify Align both ends

text-align: left;

Copy after login

7 Text vertical alignment

Optional valueDescriptionbaselineDefault. The element is placed on the baseline of the parent elementsubVertically aligned subscript of the textsuperVertically align the superscript of the texttopAlign the top of the element with the top of the tallest element in the linetext-topAlign the top of the element with the top of the parent element's fontmiddlePlace this element in the middle of the parent elementbottomAlign the top of the element with the top of the lowest element in the rowtext-bottomAlign the bottom of the element with the bottom of the parent element's fontinheritSpecifies that the value of the vertical-align attribute should be inherited from the parent elementThe vertical-align attribute will only work if the element belongs to inline or inline-block.

vertical-align: baseline;

Copy after login

8Text-decoration

##Optional valueDescriptionnoneNo underlineUnderlineOverlineMiddle underline (strikethrough)


	underline
	overline
	line-through
	text-decoration: underline; Copy after login 9 首行缩进: text-indent 该属性接受一个带单位的值规定文本首行缩进多少个单位的空间只对第一行有缩进，而且只用于块元素 text-indent: 2em; Copy after login text-indent的属性值一般会使用em作为单位，因为一般缩进都以多少个字符为标准 10字间距: letter-spacing 该属性接受一个带单位的值规定每个字符之间间隔多少个单位的空间 letter-spacing: 1em; Copy after login 11 词间距: word-spacing 该属性接受一个带单位的值规定每个单词之间间隔多少个单位的空间该属性对中文无效相关文章推荐：鼠标划过字体时如何用css来实现字体变色？（代码实测） css三栏布局的三种实现方式（圣杯布局、双飞翼布局、Flex布局） The above is the detailed content of What is css? Introduction to three css styles and text attributes. For more information, please follow other related articles on the PHP Chinese website! Statement of this Website The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn Hot AI Tools Undresser.AI Undress AI-powered app for creating realistic nude photos AI Clothes Remover Online AI tool for removing clothes from photos. Undress AI Tool Undress images for free Clothoff.io AI clothes remover Video Face Swap Swap faces in any video effortlessly with our completely free AI face swap tool! Show More Hot Article Assassin's Creed Shadows: Seashell Riddle Solution 1 months ago By DDD What's New in Windows 11 KB5054979 & How to Fix Update Issues 3 weeks ago By DDD Where to find the Crane Control Keycard in Atomfall 1 months ago By DDD How to fix KB5055523 fails to install in Windows 11? 2 weeks ago By DDD InZoi: How To Apply To School And University 3 weeks ago By DDD Show More Hot Tools Notepad++7.3.1 Easy-to-use and free code editor SublimeText3 Chinese version Chinese version, very easy to use Zend Studio 13.0.1 Powerful PHP integrated development environment Dreamweaver CS6 Visual web development tools SublimeText3 Mac version God-level code editing software (SublimeText3) Show More Hot Topics Where is the login entrance for gmail email? 7749 15 Java Tutorial 1643 14 CakePHP Tutorial 1397 52 Laravel Tutorial 1293 25 PHP Tutorial 1234 29 Show More Related knowledge How to use bootstrap in vue Apr 07, 2025 pm 11:33 PM Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins. The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website. React's Role in HTML: Enhancing User Experience Apr 09, 2025 am 12:11 AM React combines JSX and HTML to improve user experience. 1) JSX embeds HTML to make development more intuitive. 2) The virtual DOM mechanism optimizes performance and reduces DOM operations. 3) Component-based management UI to improve maintainability. 4) State management and event processing enhance interactivity. Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences. How to set up the framework for bootstrap Apr 07, 2025 pm 03:27 PM To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications. How to write split lines on bootstrap Apr 07, 2025 pm 03:12 PM There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines. How to insert pictures on bootstrap Apr 07, 2025 pm 03:30 PM There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property. How to use bootstrap button Apr 07, 2025 pm 03:09 PM How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text See all articles Public welfare online PHP training，Help PHP learners grow quickly！ About us Disclaimer Sitemap © php.cn All rights reserved