What are the styles of css?-Front-end Q&A-php.cn

CSS (Cascading Style Sheet) is a very important language in web design, which can control the style and layout of web pages. Among them, style is the most basic element of CSS, and various styles can be added to HTML elements. There are mainly the following CSS styles:

1. Inline style

Inline style is a way to add styles directly in HTML tags, and is suitable for some relatively simple web pages, such as Basic styles such as text color, font, font size, etc.

Sample code:

这是一个段落

Copy after login 2. Internal style sheet

The internal style sheet is to add the tag in the head of the HTML document to define the entire HTML page style. Suitable for the definition of the overall style of the website.

Sample code:

p {color:red;font-size:16px;} 这是一个段落

Copy after login 3. External style sheet

The external style sheet is a link to an external CSS file in the HTML document, so that multiple HTML pages can share the same CSS style sheet. Applicable to the definition of the entire website style and easy to modify.

Sample code:

Add the following code in the HTML file:

这是一个段落

Copy after login Add the following code in the style.css file:

p { color:red; font-size:16px; } Copy after login 4. Advanced Style (CSS3)

CSS3 is an upgraded version of CSS, adding many advanced styles, such as rounded corners, shadows, animation effects, gradients, etc. These styles can make web design more colorful.

Sample code:

/* 圆角 */ div { border-radius:10px; }

/* 阴影 */ div { box-shadow: 5px 5px 5px #ccc; }

/* 动画效果 */ div:hover { animation: example 1s ease-in-out forwards; }

@keyframes example { 0% {transform: scale(1);} 100% {transform: scale(1.2);} }

/* 渐变 */ div { background: linear-gradient(red, yellow); } Copy after login The above are common style types in CSS. Understanding different style types and their usage scenarios is very important for front-end developers. In actual projects, correctly choosing the appropriate style type can make our code more concise and easy to maintain, and it can also make the web design more beautiful and concise.