CSS的选择器和常用样式（id，class,组合，字体，背景，宽度，高度，颜色等CSS样式）

<html><head><title>CSS的选择器和常用样式</title><meta charset="UTF-8"/><!--声明css代码域--><style type="text/css">/*ID选择器*/#div01{background-image: url(img/1.jpg);}/*标签选择器*//*div{background-color: bisque;}*//*类选择器*/.common{background-color: orange;}/*组合选择器*/#div01,#ta,p{border:  1px;width: 300px;height: 300px;}/*子选择器*/div>b{font-family: 萝莉体 第二版;color: red;}/*属性选择器*/input[name=uname]{color: red;}/*常用样式*/#showdiv{border: solid 1px;/*边框样式*//*大小样式*/width: 300px;height: 300px;/*字体样式*/font-size: 20px;font-family: 萝莉体 第二版;font-weight: bold;font-style: italic;color: red;/*背景颜色*/background-color: antiquewhite;/*背景图片*/background-image: url(img/1.jpg);background-size: cover;background-repeat: no-repeat;/*内容居中显示*/text-align: center;}a{text-decoration: none;}li{list-style: none;float: left;}</style></head><!--CSS的选择器:(基础选择器)ID选择器：作用：针对性给某个标签添加样式#id名{样式名:样式值;样式名:样式值;....}标签选择器：作用：给某一类型的标签添加公共样式标签名{样式名:样式值;样式名:样式值;....}类选择器作用：给不同的标签添加公共样式先声明类选择器，然后在标签上使用class属性引入类样式.类选择器名{样式名:样式值;样式名:样式值;....}(了解)组合选择器：基础选择器,基础选择器,基础选择器...{样式名:样式值;样式名:样式值;....}子选择器：基础选择器>基础选择器{样式名:样式值;样式名:样式值;....}后代选择器：基础选择器  基础选择器{样式名:样式值;样式名:样式值;....}属性选择器标签名[属性名]{样式名:样式值;样式名:样式值;....} 标签名[属性名=值]{样式名:样式值;样式名:样式值;....} css的常用样式：边框样式：border:solid 1px;border-top:样式值;border-left:样式值;border-right:样式值;border-bottom:样式值;大小样式：width:样式值height:样式值字体样式:font-size: 40px;font-family: 萝莉体 第二版;font-weight: bold;font-style: italic;color: red;背景颜色样式：background-color: antiquewhite;背景图片样式：background-image: url(img/1.jpg);background-size: cover;background-repeat: no-repeat;内容居中text-align: center;其他样式  text-decoration: none; 去除超链接的下划线list-style: none;去除li标签的顺序符号float: left;左浮动--><body><h3>CSS的选择器和常用样式学习</h3><hr /><div id="showdiv">今天学习了CSS，好简单<a href="http://www.baidu.com">百度一下</a><br /><ul><li>苹果</li><li>苹果</li><li>苹果</li></ul></div><br /><div id="div01">我是div01<b>哈哈</b><div id=""><b>嘿嘿</b></div></div><b>呵呵</b><div id="div02">我是div01</div><table border="1px" cellspacing="0" cellpadding="10px" class="common" id="ta"><tr><th>Header</th></tr><tr><td>Data</td></tr></table><p class="common" id="p1">我是段落</p><hr /><input type="text" id="" value="" /><input type="text" name="" id="" value="" /><input type="text" name="uname" id="" value="" /></body>
</html>

CSS的选择器和常用样式（id，class,组合，字体，背景，宽度，高度，颜色等CSS样式）相关推荐

html设置背景图片高度,如何使用CSS设置背景图像的大小？
如何使用CSS设置背景图像的大小?下面本篇文章就来给大家介绍一下使用CSS设置背景图像大小的方法,希望对大家有所帮助. image CSS background-size属性可用于设置背景图像大小:使 ...
html设置背景图片高度自适应屏幕,CSS设置背景图宽度100%，高度自适应
div的高度随背景图片的高度变化: 原理是通过padding-top或者padding-bottom实现,值是背景图片的宽高比.高度设置为0..newcenter{ width: 100 ...
CSS基本知识之常用的选择器分类
一.CSS基本知识: 1.CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.有时我们也会称之为 CSS 样式表或级联样式表. 2.CSS 是也是一种标记语言 3.CS ...
CSS基础选择器(选择器的优先级)，CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成，盒模型-block，盒模型布局...
CSS基础选择器 (1)id选择器: # => 标签拥有 id="user" 属性 <style>#user {width: 200px;}& ...
【网页制作】CSS基本选择器讲解（附讲解视频）
1.首先我们要知道什么是选择器? 选择器是通过一定的语法规则选取对应HTML标记,然后给对应的HTML标签设置样式.比如:长度,宽度,颜色等等. 2.选择器类别选择器一共有四类: 1基本选择器,2复 ...
CSS初识- 选择器背景浮动盒子模型
CSS初识 CSS:cascading style sheets,css样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边 ...
css学习（第一天）（css基础选择器，css字体属性，css文本属性，css引入方式）
CSS第一天 1.css简介 1.1 html的局限性 1.2 css-网页的美容师 1.3 css语法规范 1.4 css代码风格 1.4.1 样式格式书写 1.4.2 样式大小写风格 1.4.3 ...
css class选择器用法,CSS类选择器用法简明介绍
你对CSS类选择器的使用是否熟悉,这里向大家描述一下,在CSS中,CSS类选择器通常以一个点号显示,需要注意一点的就是不要使用数字起始类名!因为它无法在Mozilla或Firefox中起作用. CSS ...
背景裁剪图片html,HTML5基础加强css样式篇（文本裁剪,背景裁剪：background-origin，background-position，background-clip）（三十七）...
1.背景定位: .box { /* .box 默认样式 */ margin: 200px 0 0 200px; width: 200px; height: 200px; background-imag ...

CSS的选择器和常用样式（id，class,组合，字体，背景，宽度，高度，颜色等CSS样式）

CSS的选择器和常用样式（id，class,组合，字体，背景，宽度，高度，颜色等CSS样式）相关推荐

最新文章

热门文章